- The keyboard design isn’t as slick as the iPhone keyboard design
It’s not quite a MacBook keyboard layout and it’s not an iPhone keyboard layout either. Commit actions like, done, go, search aren’t colored like on the iPhone. The dashes, dots, commas are hard to distinguish. On the iPhone a typewriter like key pops out so you can visually confirm that you hit the right key. On the iPad there is no feature to deal with occlusion. - How you hold the device really alters the user experience and how apps should be designed.
On the iPhone the design is done in such a way to accommodate the way you hold the device. For example in mobile Safari and in email the command buttons are along the bottom of the screen. This puts many buttons in thumbs reach. On the iPad key buttons in both email and Safari are across the top. This means that if you’re holding the device along the bottom you can’t reach many of the buttons without moving your hands. Since the home button tends to be along the bottom there’s no comfortable rest-state. - About my laptop
It starts out with just email and some web-browsing but pretty soon you realize that most of the things you do can be done on an iPad. Not all, and this gap is closing. In particular heavy typing tasks (blogging for me) and heavy editing, especially visual and graphics editing is still better with a laptop. That being said I am much happier bringing a light iPad to a meeting then a heavy laptop. - You don’t use this device like a giant iPod.
I’ve never read a book or a magazine before on either my laptop or iPod. I’ve never played a four person multi-touch game on either of these devices. The experience is different and fun. In a new way. Magazines and books are key here. This is the future of digital content. - Certain people could use this as a replacement computer but I can’t.
Email and web browsing without compromise. (Well maybe the Flash thing) Other then that you have a pretty nice device for doing the core things my mom uses her computer to do. For technical users the iPad doesn’t do enough to replace their laptop. - Screen orientation is flipping me out
When you hold the screen in vertical orientation you get 4 icons across and 5 icons down. When you flip the screen you get 5 across and 4 down. The annoying part is that the icons re-positions so you can’t use spacial memory to find an icon. Was that icon on the top right? Ohh, sorry now it’s in the middle left. - The web is not ready for the iPad (yet).
There are still plenty of sites with embedded video/flash and when I hit these sites I am likely to move on. I almost never stop what I’m doing to go grab my laptop. As the iPad sails past the 1M mark the tech-savvy sites will transition over to H264 video. The issue is primarily video although other flash goodness will still be missing.
Flash sucks but HTML5 is worse then Flash on many things, more on that in another post.
Subscribe to this blog to hear more on that.
- The battery lasts a freakishly long time
It’s nothing like a Kindle but compared to other bright-screen electronics. Wow. That’s all I have to say about that.
- A different user experience is fundamental to touch computing
I remember a program manager from Microsoft talking about the Tablet PC back in 2000. He said, in the history of computing there has never been a product category that has failed as often as tablet based computing. From the Alan Kay to the Apple Newton and even Windows for Pen Computing. The history books are filled with these ‘slate’ computers that have failed. He then went on to explain how the Tablet PC would be different because it focused on the input experience.The truth is that the tablet/slate experiences of the past were not that different. It was Windows with a great input editor. It’s too early to tell if the iPad will succeed or fail but the iPad user experience is so different in a fundamental way that it will change how people interact with computers.
How do I know? My two year old is now reached out and trying to scroll the screen on my laptop. If that’s not the future I don’t know what is.
Archive for the ‘Usability’ Category
9 Things I didn’t know about the iPad
May 10
14
Interface List Design – Drupal
Oct 09
1
This is a quick UI critique on a list design pattern that’s in a proposed stages for Drupal7. The UI being critiqued is not final, as such the feedback is meant to be helpful to both the Drupal team and anyone else designing list based design patterns.
Before:
Example image from drupal 7 content list
Key points with this screen:
- The title areas don’t tell you what you’re supposed to do on this screen. In fact there are at least three competing title areas. “Content” as a title, “Content” as a tab, “Add new content” as a secondary title and two group boxes that cover filtering and updating. The actual title of the screen doesn’t reflect the modal nature of dialog. You’re actually adding content to something else and it’s not clear what that is.
- The information is presented in the wrong reading order. The content table should be first. You first have to read the list to see what you’re dealing with before you decide to either filter it or update it.
- An empty list is a dead-end. It tells you there is no content but doesn’t direct you on how or where you should go to create some.
- The X in the upper doesn’t make it clear what it would close. The tab? The dialog? A simple cancel button or a standard cancel button or a close button in the upper right would be more obvious.
After
Key points
- Title should say what you’re doing.
- Filters should sit above column headers whenever possible. No additional button action should be needed and multiple filters can be applied at the same time.
- It should be easy to reset the filters and hide them. Hidden should be the default. The filters should give you a clue as to the number of items in each filter bucket: Articles (3) Posts (120). This makes it easier to select the right filters.
- If the table is empty it should be easy to get to a content creation page.
- Buttons along the bottom of a dialog provide clear ways to exit or complete the task.
- Things that don’t map to the core task should be hidden. In the original mockup there were options to update the status of content from published to unpublished. This type of functionality belongs in a management section, not when you’re “adding content.” It should be removed or hidden in a similar way that filters can be hidden.
Drupal User Experience
Aug 09
8
Over the summer we overhauled the Raizlabs website. It was originally developed in 2001 using Frontpage (yeah, I know). The site had accumulated a number of HTML files, a collection of ASP files, a number of blogs for personal and company use, some newsletters and assorted client scripts.
In re-designing the site I knew I wanted a content system. We evaluated Joomla, Drupal, WordPress and custom solutions. Joomla and Drupal looked promising. WordPress was a good blog system but not designed for larger site structures. We started implementing a Joomla site and were perhaps a week into the process when we decided to change paths and go with Drupal.
The Joomla front-end experience is easier to get started with but makes it difficult to setup and interact with content quickly. The Joomla system had a lot of out of the box features but it required too many steps to do simple things.
The Drupal user experience was by contrast amazingly stark. After downloading Drupal I couldn’t figure out how you could possibly build a site using it. It later became clear that the real value of Drupal was with it’s module system.
Critical flaw: Make sure things work out of the box. Batteries should be included.
While Drupal is truly a powerful system this is easy to overlook. The default install that you get from Drupal.org has nothing included. It’s like getting a car engine without the seats.
Dries: Oh, you want seats in your car? There’s a module for that.
There are more complete solutions and downloads available from providers like Acquia but this is not obvious. The modules are the most critical part of Drupal and if you’re not familiar with modules it’s not clear what modules you need. They have many names that are also not obvious: CCK, Views, ImageCache, AdvancedHelp, Devel, Mollom, TaxonomyMenu.
Too much flexibility can cause problems.
Everything in Drupal is customizable. Not only can you customize your content but the system also makes it very easy to customize the admin structure, menus and commands however you want. It’s so easy to customize the administrative interface that it’s easy to get into a state where nothing works.
The admin interface should be designed to be quick and efficient for creating and editing content. Some amount of customization is great but the system as it stands is overly abstract making it easy to get into trouble.
Be good at certain things. Don’t try to be good at everything.
When evaluating Drupal it seemed that it has support for blogs, forums, discussions, groups and pretty much everything else. It was only later that we decided that even though Drupal could do these things it couldn’t do them well. For instance Drupal has a blog module but it’s so much harder to use then WordPress that there’s really no reason to fight Drupal to do what you want, it’s easier to integrate WordPress. Same story for PHPBB and the Drupal Advanced Forum module. As a content system Drupal should make it easier to integrate these external products. Instead they try to re-invent these components and it doesn’t work. Drupal is a good content system but it’s not a good blog and it’s not a great forum.
More then anything I wish Drupal would be a better cross product citizen for other PHP projects. For example: Gallery, PHPBB, WordPress, ZenCart, etc. Plugging in other stuff that’s not part of Drupal should be encouraged. The attitude that it has to be Drupal for everything is simply not practical.
Views and CCK
Views and CCK allow you to create all sorts of queries onto your content and allow you to customize the fields of content that you collect. It’s basically like creating your own database columns for your content. The problem is that you can’t just take someone elses database you have to build them yourself. If I want to setup a bunch of content and views to create a little client database I have to start from scratch. It would be so much easier to take a good solution as a starting point and customize it to specific needs.
There should be a number of popular and useful views that should be included. I shouldn’t have to create my own “random post of the day” or “most popular articles” these should be canned views.
Modules and Blocks
A module encompasses a portion of functionality. It’s actually not ‘modular’ in that sense of the word. It’s more like a plug-in that extends the functionality. A block is a component that gets shown on a page.
The block model assumes that you have one core site template and that blocks are either shown or hidden on each page. As your site grows you have to have rather complex rules for when certain blocks are shown and when they are hidden. The UI to customize this show/hide functionality is rather broken. Rather then having page tempaltes with visual drag-drop interfaces for multiple pages you have to manually specify all your blocks and pages within one block template page.
I wish I could define a site structure then drag/drop content and widgets to each page in the site structure.
Terminology
With any content system there’s a certain amount of learning that has to happen. For some reason content systems don’t use terminology that is used when designing a website. They use their own abstract terms: Page, Story, Book. If you take these terms literally you may expect that stories compose a book and a page is one page of a longer story. This isn’t how it works.
Drupal uses the term “Menu” for everything. Even if certain things are tabs, other things are trees and still others are actually menus.
Making things practical, not just possible.
Drupal has the ability to do a lot of things but in many cases these things are possible, not practical. Solutions for certain tasks are not ‘turn-key’ they involve a lot of customization and configuration. As a simple example I wanted to create a special “clients only” section on my site. Reading the docs and forums there were at least 10 different approahes for how to solve this problem. Some solutions suggested advanced permission modules, others suggested Organic Groups, still others suggested a CCK/Views approach. This seems like such a basic security scenario that there should be a simple solution to make this work (there was not).
I’m sure this problem has been solved many times over using Drupal however there is no current way for people to share these “solution recipes” in a way that I can download them and have things just work.
Long term experience
I think Drupal’s user experience has a lot of potential and I’m encouraged by the efforts I’ve read about for the Druapl 7 release. Focus on the user experience is really the thing that’s going to make this not just a powerful system but a practical one. I’m looking forward to it.
Make it easy to navigate
Jul 08
8
A couple months back I heard a good talk by Steven Krug. The talk was entertaining and had a simple core point.
- Let people know where they are on your site so they don’t get lost.
Lately I’ve noticed a bad trend in web-design that sites make it very difficult to tell where you are:
Instead of using some visual indication to tell you what section of the site you’re on these sites choose to do nothing. This makes it difficult to tell where you are on the site.
It’s super easy to bold or highlight the section you’re on. Why aren’t these sites doing this? Perhaps in a ‘page view’ culture they want to confuse you and get you to click all around the site looking for the page you need. Twitter in particular highlights a tab that has nothing to do with the page that you’re on.
Well designed sites tend to have primary and secondary navigation elements and it should always be obvious where on the site you are simply by looking at the navigation area. You can bold the text, use a tab graphic, highlight the text, etc, etc. Make it obvious when you’re on a particular section of the site.
LinkedIn, Facebook and Flickr also use hover menus. In general hover menus can cause all sorts of accessibility problems. They also cause obstruction problems as you move your mouse through the screen you pass through the menu and obscure the area you’re trying to click. Lastly since these hover menus contain secondary navigation elements you can’t tell where you are on the site because typically the hover menu is closed.
There are ways to use hover menus and make your navigation clear. Staples is an example of this. The primary navigation is always obvious and althouh the secondary navigation is a hover menu the currently selected page is expanded and shown within the header area making it easy to move around the site.
Mini-UPA 2008 – Not just about Usability
May 08
7
If you’re in New England and interested in design, software and usability you’ll want to check out the Mini-UPA one day conference. It’s a one day event so you won’t be tied up all week and it’s jam packed with great speakers. There are over 30 speakers talking about all sorts of things from Web Apps, Interaction Techniques, Analytics, User Experience and design. Best of all the event is really affordable for a full day of speakers and classes. The event is May 28th so go put it on your calendar and sign-up now.
I’m on the board of UPA Boston and my company is also co-sponsoring the event but don’t let that stop you from showing up. I hope to see you there.
World Usability Day 2007
Nov 07
8
Today is World Usability Day so take a minute and think about how the products and services around you could be more usable and friendly. Think about the frustrations you experience and the frustration experienced by others. Each year world usability day aims to raise awareness about usability in the hope that products and services will strive to be more usable, not just more functional.
There are events going on around the world today, see what’s going on in your city.
Usability, Frustration and Delight
Sep 07
27
On Wednesday Jared Spool spoke at UPABoston about the web today, its history and perhaps its future. One of the more interesting parts was how usability plays into products. In the past the main objective was to overcome frustration. If you overcome frustration and do something useful you can call it usable. But what happens once a product is usable? Are you done? Of course not. You can extend past frustration and actually delight your customers.
But what are the elements of delight? Jared, argued that the elements of delight are fairly well known from the gaming industry. Games have been trying to delight us for years. While this is in part true I think the game analogy is the wrong approach. A typical game will polarize people. The things I may find delightful about Doom and Halo would drive my mom nuts. Similarly the fascination she derives from Solitaire would bore me to death.
In fact the desire to delight through the use of game metaphors has been brilliantly explored by Microsoft’s Clippy. Clippy is in many respects a game avatar and in fact does delight a fair percentage of the people who use him. When Clippy was introduced he would tend to delight about half of the people who saw him. The other half couldn’t get him off the screen fast enough. By gaming standards apealing to 50% of the market isn’t bad but for a user experience you need to do better.
Here is a list of things that I believe ‘delight’ users beyond basic usability (that comes first of course)
- Design – An attractive and well thought out design.
- Fluid transitions or animations. (as long as they are quick and don’t confuse you)
- Basic physics emulation (subtle inertia, stickiness, elasticity).
- Anticipation, Autocorrection or Autocompletion when the computer anticipates your needs correctly (frustration when it chooses incorrectly)
- Appropriate sonification (Basic and subtle sounds to reinforce certain actions)
- Discovery – Finding something quickly that you were looking for, being surprised by something new you didn’t expect
- Responsiveness if you’re not waiting for your computer you’re more likely to be delighted
- Re-use – Finding a new way to use a familiar tool
- Customization and Personalization
- Integration or compatibility (Wow, this thing works with all these other things I already own)
- Value – Wow that’s cheap.
- Humor
Others? What can software makers do to cause delight?
20 things the iPhone should do
Sep 07
15
I broke down last weekend and got the iphone. Apple Computer Inc has created a design that is great with UI that was lovingly hand polished.
Of course no matter how good it is you always want more. This is what separates great products from mediocre products. With my old cell phone everything was crap so my wish list started with things like… “i wish I could get reception” and perhaps… “How do I edit a phone number for a contact?”
Because the iPhone is by far the best phone I’ve ever had I want it to do all the things that all those other devices promised.
- The iPhone is great but the lack of games and certain applications like to-do-lists, chat applications and specific business tools leaves a gap that many developers are filling. While it’s great that this “is possible” it would be even better if this was encouraged and supported by Apple. (SDK please) Update: Done
- I should be able to use any song that I own as a ring-tone for free. If I bought the song why should I pay more to have it play automatically? Isn’t this what fair use is about?
- The Google Apps/iPhone connection is weak. You can sort of get things to sync but email has to use POP settings (not imap) and syncing calendar and contacts is awkward. Update:IMAP DONE
- Let me connect and sync my MacBook using bluetooth or wireless.
- Support rotated and non rotated mode on more screen (like the home screen, youtube and my inbox.)
- Add some texture or grips to the sides. The sucker is slippery. Update: Done
- When held sideways to watch YouTube videos your fingers cover the speaker of the iPhone.
- Use a headphone jack that will be compatible with normal headphones. Update: Done
- Sync my contacts, calendar and music between two computers. I have a Macbook at home and a PC at work but I have one life, one set of contacts and one calendar. Update: Done
- Support bluetooth GPS pucks. This would be a killer accessory for my car. GRMN+GOOG+AAPL
Update: Built in GPS - Better camera. The images the current camera takes are blurry.
- Calendar events synced from Google calendar can’t be edited so you can’t add a reminder. This is similar to #2 but seems like something that Apple could fix without Google’s help. Update: Done
- Video podcasts have two ways to view them one is from the Podcast section and the other from the Video section. The two sections aren’t really connected and it’s not obvious when a podcast has video content.
- I wish I could sync my stock portfolio via an RSS feed. If this existed e*trade, fidelity and others would have feeds right quick.
- Speaking of RSS I would love an offline RSS reader. Update: Done Via 3rd Party Applications
- Whenever I take a picture with the camera and plug-in the phone to charge suddenly both iPhoto and iTunes want to load and sync. Why can’t this happen under the covers with no UI?
- The browser should support Flash & the file browse dialog to upload a photo to a site.
- I should be able to share a business card (vCard) over bluetooth
- I should be able to use the internet connection with my MacBook. I haven’t been able to find anything useful that you can do with bluetooth on a Macbook/iPhone. Update:Done Via 3rd Party Application
- Open up access to other carriers. So far I actually have no complaints against AT&T but I would have preffered to have a choice on this.
Even though I want all these things the most important thing for me is to not loose the core user experience. The ability to create a great product is to add features without negatively impacting the overall experience. As more features, options and settings get added you risk the overall experience. If done well you get the best of both worlds if done poorly you get every other cell phone I’ve ever used.
Charlie can’t get on the T
Aug 07
28
In Boston we recently got a new way to pay for the metro (called the T around here). Previously you would either use cash or buy a token. The previous system was really simple. Buy a token for a set fare, if you don’t have a token you can pay in cash at above ground stations.
There were three visible problems with the old system:
- The train cars didn’t accept bills easily
- The token machines didn’t accept credit cards
- Many above ground stations didn’t accept tokens forcing people to use quarters and slowing down the whole process.
The Charlie Card hoped to address some of these problems without creating new ones. Unfortunatly things didn’t work out that way.
The new system has created many new problems both in the physical design as well as the touchscreen interface.
- Previously if you had a token you would put the token in and move on. The token is round and it doesn’t matter what way you drop it in. This has been replaced with a ticket. If you insert the ticket you have a 3 in 4 chance of inserting it the wrong way. Yes, it has an arrow but people still make this mistake.
- If you’re a frequent T rider you can get an RFID pass that helps solve the above issue. Only problem is you can’t buy these cards at the T stops and you can’t refill them at many stops either. This means that you still have to use cash…
- The new metro cars now accept dollar bills. Using an automated bill rejector. In the original design there was a 2-inch hole, you would crumple up your bill and shove it in the hole. The metro driver would visually verify your fair. It wasn’t pretty but it did work. The new system allows you to hold up the whole line as you try to straighten your bill to feed it into the machine.
- You can still use coins but they managed to screw this up as well. Previously the coin tray was a small concave bowl, this allowed you to drop your coins and they would funnel down. The new design is a convex dome so you have to put each quarter in one at a time.
- The design of the touch screen system that actually dispenses tickets has enough design flaws to fill a book (or a nice newspaper column) The placment of buttons, the order and flow of pages the use of color and text violates many established principals of design. Many of the stations now have a dedicated person to help people work through the poor UI. Compare this to the elegant design of the New York metro touch screen and it’s night and day.
There are a lot of people in the Boston community who are skilled in Usability and Human Factors. I had even sent an email to the MBTA volunteering to help them re-design the system and my offer fell on deaf ears. If anyone from the MBTA is listening my offer still stands.