Posts Tagged ‘Design’

« Older Entries

Mobile Ergonomics for those with two thumbs

Nov 09
23

Mobile Ergonomics

You can’t easily tap every region of the phone with equal ease. Your hand isn’t designed for this.  Yes your thumb is opposable but unless it’s double jointed there will still be parts of your phone that will be harder to tap.

When designing an application consider how it’s going to be held.  In one hand, sometimes in the other, perhaps in your pocket?  That’s why it’s so important to get the app out of the simulator and actually into your hand. The mechanics of how you hold your phone make it much harder to grip the device in certain orientations. It makes it particularly difficult to reach the lower corners by your thumb.

Consider the built in Camera application that Apple provides. The application is simple and attractive but the buttons for the application are in exactly the wrong place. To take a proper picture you need to hold the phone perfectly vertical (unless you’re taking a picture of the floor.)  The slippery edges of the phone require you to either grip the phone firmly with your hand making it difficult to tap the camera or alternatively balance the camera precariously on your pinkie finger.

iPhone Camera Interface Tap TargetsI have dropped my phone at least twice attempting this and know of at least one person who has smashed their phone into little bits because of this.

There’s a principal called “Fitts’s law” that describes how clickable items are on screen. Said simply:

Items that are larger and closer to the mouse cursor are easier to click.

The mathematical details then explain that traditional screen edges are infinitely click-able since they have a virtually unlimited size.   On a mobile device the same assumptions don’t hold true. The mechanics of your hand play a significant role.  Not only do items have to be larger to be easier to click but they have to be easily reachable when holding a phone in one hand.

Post to Twitter

Tags: , , ,
Posted in Design, Telephone, User Interface, mobile | 1 Comment »

Free iPhone Designer Icons

Oct 09
16

Designing icons is hard. Designing quality icons is harder. That’s why it’s great when a free resource pops up that provides over 100 free icons for your use in iPhone application designs. These icons are perfect for tab bars or toolbar use.

Often times we don’t use these icons verbetam but they provide a valuable design language and starting point that offers some level of predictability and consistency across apps.

glyphs and icons for the iPhone

Get them over at http://www.glyphish.com/

Post to Twitter

Tags: , , ,
Posted in Apple, Design | 1 Comment »

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:

drupal_content_list

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

drupal content list updated

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.

Post to Twitter

Tags: , , , , ,
Posted in Design, Development, HTML/CSS, Usability, User Interface | No Comments »

Going Mobile – Giving users the finger

Apr 09
29

Last month I gave a talk for UPA Boston, this is a summary of that talk.

Over the last five years we’ve seen a shift in mobile applications.  For about 30 years people thought of mobile phones as an extension of traditional phones. They would make calls and that was the primary use. Over the last 10 years we’ve added features like voice mail, texting and even basic web browsing. It wasn’t until just the last 4-5 years that the next wave of mobile has taken off.

Mobile today

Mobile phones today are dominated by three classes of devices, 16 button, 60 button keyboard and new touch devices. There are about 1Billion 16 button phones, 50-100 million keyboard phones and about 20-40 million touchscreen phones. I’m mostly talking about this last category of emerging phones though some principals apply to both keyboard phones and 16 button phones.

The key difference between the phones of yesterday and the phones of today are a combined set of capabilities and technologies that fundamentally change the user experience. These include:

  • Always connected – email/web/etc
  • Adaptive input screen (control every pixel)
  • Geo-location
  • Touch/Gesture interface
  • Accelerometer
  • Apps you can download

A lot of these technologies existed either in isolation or in awkward implementations. Together they allow for a much richer application experience. This has become a platform that is fun, exciting and profitable for application developers.

Design for existing behaviors

When designing an application it’s key to keep scenarios in mind. A scenario is the basic story of how a person may use the application. The important thing when thinking about scenarios is that actions tend to stay the same but the way you complete those actions changes.  Behavioral changes are difficult and rare. It’s much easier to design tools that encourage and support existing behaviors. Similarly it’s much easier for end-users to adopt your application or tool into their existing behaviors rather then changing established patterns.

Designing for Mobile

When designing for mobile remember that people are out in the real world. Your application needs to be a good alternative to the desktop/laptop. The factors for this type of design should include:

  • Input methods – make it easy and minimal to get information into the device.
  • Form Factor – Design for a smaller screen size and make it easy to read and get information back out of the device.
  • Location – Take location into account
  • Efficiency – A mobile application should be quick and efficient
Input Considerations
You can’t always expect that the user has both hands free. People are often holding something else in their hand, coffee, bags, railings, doors, etc.  You should design your application to be usable with one hand. Consider scenarios where the user may have both hands occupied, driving, running, etc.
Opposable thumbs are great but they aren’t perfect. There are spots on the phone that are particularly hard to hit with one hand. Certain apps aren’t designed well for single handed use. Fitts law doesn’t work on mobile devices. Because of the mechanics of the human hand certain zones are easier to hit and this has little relation to the screen edge.
Output Data
Use large presentation size fonts, 14-18pt fonts are typical. Use large finger tip sized targets, 30-40px are easy to tap.  Small targets are particularly hard to hit. Examples: Info buttons are tiny and sliders tend to be particularly hard to tap.
Touch Screen Language
The user interface language is being defined now. The desktop conventions of click, double click, right click. These conventions don’t always hold on a mobile device. A whole new interface language is being developed in rather an ad-hoc way. Certain conventions are becoming more popular:
  • Tap – most similar to click
  • Tap & Hold – magnify, copy/paste, selection/make dragable
  • Swipe – scroll, secondary action/delete option
  • Pinch – Zoom
  • Shake – Undo/Refresh/Clear
Basic guidelines
1) Each screen should do one thing (well)
2) Minimize on-screen elements (quantity, not size)
3) Make things easy to tap
4) Avoid preferences
5) Design for the 80% case
The session covered other topics including Mobile Wireframe Design, Mobile Web Design. Mobile Usability, and Mobile Gaming. The variation of the talk will be given at this years Mini-UPA, an event put-on by Boston UPA.  If your company or organization is interested in hearing it first hand contact me for additional info.

Post to Twitter

Tags: , , ,
Posted in Apple, Design, Misc., Telephone, User Interface | 2 Comments »

Kindle ReDesign

Feb 09
12

While the technology is amazing and the concept of an e-Book reader is great the actual design of the Kindle and it’s second version is still pretty bad.

The core scenario is reading content and the design doesn’t reflect this. The design has too many bells and whistles and not enough elegance to be a truly great device.

  • A keyboard has no business being in a book. It clutters the hardware and it takes away space from your content.  It’s about consuming content not creating it.
  • The device needs to be touchable.  If you’re going to offer any type of interaction with the pages and content you need to be able to touch the screen to turn the page and tap menus.
  • The design should be more anthropomorphic (human-like) both in look and interaction. It needs to feel less mechanical and more natural.
  • It needs to properly render the design intentions of the typographers and publishers that created physical books. Things like hyphenation aren’t just pretty, they help readability. The book content comes first.
  • Black and grey, really?  This is an example of a compromise in the design.  The readability, functionality and user experience suffers because someone decided that it needed to use e-ink. This technology is cool but it’s performance and color contrast is still not as good overall as a color screen. Yes you can use it outside but a design that sucks inside still sucks outside.  Plus you can’t read it at night without a secondary light.

My proposed design:

  • Three buttons, on/off, next page, previous page. Everything else is touch screen (including a touch keyboard when needed)
  • Color screen design allows for better web and book reading
  • Screen takes up 80%
  • Typography and graphics are rendered as the author intended
  • No menu/wifi/battery indicator. It’s a book. Tap the screen to see menu/status info/options.

Post to Twitter

Tags: , , ,
Posted in Misc. | 65 Comments »

IPhone Application Design

Jan 09
9

I’m going to talk about four of our recent iPhone projects that we’ve been working on at Raizlabs. Two of them have shipped two have not. We started developing for the iPhone over the summer of 2008 and have had a fun ride. The mobile UI design space is quite different from traditional web-design in that it forces you to think about application design in a whole new way.

In the process we developed some tools to help other designers. Make sure to check out our iPhone wireframe toolkit.

RunKeeper

RunKeeper Mockup

This was our first large application, we were approached by a new Boston start up looking to enter the fitness space. We discussed a number of ideas including a web-dashboard, GPS integration and other technologies. We hit upon the idea of creating a mobile version of a GPS watch.

This was before the iPhone 3G was announced so we were taking a risk that the upcoming phone would in fact have GPS capabilities. The value proposition was simple, why buy an expensive GPS running watch when you can get a low cost iPhone application to do the same thing.

The user scenario oriented around a runner who would start their music and start a run.  The display had to be easy to read while running and provide easy to read and easy to understand information.

Through several iterations we discovered how many customers are actually bikers, hikers and the various ways that GPS data and accuracy can vary based on where you are and what you’re doing.

The application has won many awards and has been featured in a number of newspapers, blogs and other publications.  RunKeeper continues to evolve as we disect deeper interaction problems and continue to refine the end user experience.

You can download RunKeeper and get additional information here

Loan Lite Mortgage Calculator

LoanLite Mortgage - Calculator</b>

Loan Lite started off as an exploration by our summer intern, Justin. The goal was to develop an application that had one user interface page, was meant to be used in a mobile scenario, could be developed in about a week and sold for at least $0.99.

We explored a number of ideas and decided that a mortgage calculator could solve a problem for house-hunters or real-estate agents on the go. Figuring out mortgage calculations isn’t rocket science but it’s also something that people tend to need while away from their PC’s.  We also felt that the utility of the application far outweighed the .99 cent cost, especially considering the typical price of a home.

We did a competitive analysis of existing calculators and found that many didn’t offer adjustments for home owner fees, insurance and similar considerations when trying to determine a monthly payment.

The application was put together over the course of a couple weeks and served as a good foundation for learning objective C.

This mortgage calculator is available from the iTunes app store.

A note to comp-sci students in the Boston area. We’re always looking for talented and driven people for summer internships.

Word Popper

WordPopper

Word Popper is our first design exploration into mobile games. We wanted to design a simple game that could be played solo while waiting for the bus or train but also incorporated an online multi-player component.

We wanted to create a fast moving game so unlike Boggle or Wurdle where you have to string nearby letters together to form a word we allow the user to pop letters anywhere to create words as fast as they can.

This creates a fast moving casual game that can be played by crossword junkies, scrabble and boggle lovers and casual users alike.  The online component allows users to play the same board as other users and compete for high-scores.

Designing for a game is very different from designing a typical website in that you’re more free to explore effects such as animations, buzzers and sounds.  The most interesting thing about game design is usability. The main purpose isn’t to accomplish a specific task but to have fun.

You can download Word Popper from the store here.

JetSetter App

JetSetter Luxury Game

JetSetter is a experiment in psychology and economics of high-end products. The majority of iPhone application are currently targeted at the low-cost or free side of the market.  The assumption is that to generate the greatest profit you need to generate a ton of demand. To generate a ton of demand you need to have a low price point.  For this reason you see many low cost apps.

Unfortunately for application developers having a low price point no-longer guarantees high demand.  We wanted to try something different.

JetSetter was designed as a high-end game. In fact we plan to make it the most expensive game that Apple will allow at $999.  While some may view this as outrageous this is intentional because we want the game to be more exclusive. A limited audience may garner a premium price.

The object of the game is to travel around the world on your private jet and accumulate points for the distance you travel.  What’s that?  You don’t have a private jet?  Well then you probably can’t afford this game either.

The game explores the high-end of the iPhone application market a section of the mobile space that has been mostly ignored.

In the $0.99 cent world we need to sell over 14,000 copies to make 10K.  While in the $999 world we only need to sell about 14. This means that smaller more specialized high-end apps can in theory be very profitable.

Weather or not this model for applications will work is yet to be seen. The application includes some interesting social features to make it appealing to an exclusive crowd.  The application isn’t yet available but keep an eye out on JetSetterApp.com if you have a Jet or fancy yourself as a JetSetter and think you can afford it.

Post to Twitter

Tags: , , , ,
Posted in Apple, Misc., mobile | No Comments »

Iphone wireframe and interface toolkit

Nov 08
9

A wireframe is a design tool used to easily communicate ideas, and allow for quick iteration. Wireframes can be created easily by anyone with or without technical know-how to discuss ideas. 

Often when I work on projects with CEO’s and high-level executives there is a problem communicating design, concepts and intent. People may cite the lack of design or drawing skills. A wireframe levels the playing field allowing anyone with even basic Powerpoint skills to create basic screen designs.  I posted my original wireframe for web-applications here.  I’m now back with an iPhone based version. 

Why iPhone? Well first off I’ve been doing a number of iPhone related projects including Runkeeper and GPSTwit among others. Secondly the iPhone provides a unique interface language and set of reusable design patterns that can be easily incorporated into new applications. While the basic wireframe components can be used to conceptualize any mobile device the iPhone interface makes it uniquly different. 

The primary design pattern used on the phone is the list pattern. There are many examples of the list pattern but the basic idea is that it allows you to add/edit/remove/view sets of items.  The second design pattern is the table pattern usually used for forms, input and settings. Combined these two elements form the foundation of the platform. 

The wireframe provides a number of examples of how these patterns can be used, modified or altered.

Post to Twitter

Tags: , , , , , , , ,
Posted in Apple, Design, User Interface | 2 Comments »

Application design for mobile phones

Jun 08
5

I love designing applications for mobile phones. It forces you to think about the essential features. Often times this is exactly the type of design you want on larger applications but it’s tougher to convince clients that the application gets better when you take away features. Many larger applications can learn from this.

  • Do one thing, do it well
  • Linear flow top-down
  • Purposeful word choice
  • Large fonts for readability
  • Keyboard accessibility
  • The details matter

Post to Twitter

Tags: , , ,
Posted in Apple, Design, Experience, Prediction, Telephone | 2 Comments »

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.

Post to Twitter

Tags: , , , , ,
Posted in Experience, Usability, User Interface | 1 Comment »

What not to do, MsgBox edition

Oct 07
11

Bad Message Box Buttons

If you decide to use a message box use the appropriate buttons and use the appropriate text. The text in this dialog is strange enough without the extra language backflips that the developer added.

Another example from the same program:

Bad Message Bad Buttons

Here you’re showing an information box and you have a “Yes” button. It’s just weird. What are you saying yes to? Instead display a progress indicator while data is downloading and add the warning text not to disconnect.

Post to Twitter

Tags: , , , ,
Posted in Misc. | 2 Comments »

« Older Entries