Understanding the Differences between Designing for Mobile and Desktop Media While Learning the Best Practices for Designing iPhone Applications

As a designer, my job is to solve problems and create a solution for a client. Mobile devices have now opened a door to a different kind of problem solving than with desktop media. I recently read a book called Tapworthy: Designing Great iPhone Apps by Josh Clark. The book is extremely helpful for any designer who is designing for mobile devices, especially the iOS platform. The mobile experience is a totally different user experience. The design elements and layout need to be thought of in a new and different way than with websites, interactive or application design. I highly recommend this book for anyone who is starting to design for mobile. Even though the book focuses on the iPhone, the methods can be applied for virtually any touchscreen smartphone. One of the main reasons I enjoyed this book so much is that Clark described layout and graphical element design, along with providing visual examples to mobile design methods and standards. Through the reading of this book, designers and developers can create high quality apps that succeed in providing great solutions for their clients. I will describe Clark’s information regarding overall considerations for mobile design, the size and touch experience, layout design, graphical elements and overall style.

Overall Considerations:

Clark describes some key elements that designers need to understand and learn when working towards designing a successful mobile experience.

• An app is used to provide a solution for the user: microtasking, location based information and staving off boredom.
• Just like when designing for the desktop, use cases and scenarios should be considered.
• To succeed with an application, it needs charisma, an identity of what makes it different from other applications and you must replenish content from time to time to give it a long shelf life in the store.
• When designing a website companion app, consider how to improve the website, not just rebuild it.

Size and Touch:

Let's face it, one of the biggest differences from designing for the desktop verses a mobile device is that it is smaller and you touch it to interact with it instead of using the mouse/cursor. Clark writes about best practices for the mobile user experience in the face of these considerations. I have listed his main points below.

• Ergonomics are key. Consider how the interface feels to the user. Tap, slide and flick are based upon the life-like realism of physics.
• When designing the screen layout, the primary controls need to be placed within the thumb’s hot zone.
• Consider that it is a one-hand touch experience.
• Organize the layout to fingers and thumb.
• For the iPhone, designers need to make all tap areas 44 pixels or larger to enable easily tapped areas. If designing with a tab bar, it is 49 pixels wide. All tab bar icons should be 30x30 pixels and icons for the toolbar and navigation should be 20x20 pixels. Keeping in mind that a 44x44 area is the standard for the touch size.
• Place primary content at top and navigation at the bottom, mainly the left-hand side.
• To consider both left and right-hand users span buttons to the entire width of the screen.
• Large buttons not only give a clear guidance, but when using them, the users can’t miss tap targets no matter what hand they are using during their experience.
• Keep on screen elements to a bare minimum. Keep the main navigation in easy reach and avoid scrolling when appropriate.
• It is best practice to have no more than 5 icons for navigation in a tab bar.
• Scrolling should be used with caution, but scrolling can be utilized when users are reading a large amount of content such as an article or book.
• In order to deal with large amounts of content on the screen, designers can create different states through taps. Designers don’t have to show all of the content at once. For example, a weather app can display the weather for daily, weekly and hourly through different buttons.
• Make advanced tools hidden. These tools can emerge from the main navigation upon demand, but don’t need to present up front.

Layout:

Unlike web design, users should be able to flip through screens in a straight line, through sets or categories or a neatly categorized collection of information. There are three ready-made navigation models created by Apple that can be used for one’s design, making it easy for designers to have a jumping off point in their design. I am going to describe the three Clark provided below and list the best practices for each of the models:

1. Flat pages

• Apps with a single main screen that are highly graphical.
• These are no-scroll displays, but might have multiple versions of a main screen that one can swipe left-to-right to view.
• Best used for browsing and discovery for the user.
• Has a standard page control at the bottom of the screen for the user.

2. Tab bar

• Buttons at the bottom of the screen that let you switch among the app’s main functions. One can tap a button to jump to a new screen.
• Good for modes of operation for specific features or information for the user.
• Users can only view 5 tabs at a time.

3. Tree structure

• A drill down of hierarchy through categorized options or content. Users can easily go back to the main content.
• Organization and navigation lends itself to list organization.
• Tables can be used for lists in tree-structured apps. Tables present a selectable list of options, index a long list of items for rapid browsing and list and group content details.
• Within tables, there are labels, text views and web views. Labels are for short text, text views are for longer text and web views allows one to view a web page or view the app’s explicit information.

All three of these models provided by Apple can be combined within a single app. Clark explains that designers can use one model to organize the app's primary features and another for secondary navigation. However, it is my experience that it is best to keep the user experience similar throughout the entire app; otherwise, users become confused when switching to another type of interaction during the experience.

I learned when reading Clark’s book that if users have to type, there are different default keyboards Apple provides to the user: ASCII, numbers and punctuation, URL, email address, number pad, phone pad and name phone pad. According to Clark, users do not like to type with a keyboard and prefer to avoid it if possible. Instead, as an alternative, there are “picker” controls that can be used as another option that look a lot like a slot machine. It allows users to choose from a set of options all at once. There are also “action sheets” which are similar to pull-down menus, offering a selection of commands to choose from for the user. The action sheets are modal views, which means that they pause the action and dim the screen behind when choosing the option. There are radio buttons and sliders that can also be used within the design. Clark explains that sliders are good for video or audio and radio buttons are good when creating settings within the application.

Graphical Elements and Style:

Just like other desktop media and methods, designers should sketch, brainstorm and create wireframes of the visual design and user experience before designing with Adobe Illustrator or Adobe Photoshop. I was reassured to read that the creative process is just as important when designing for apps before jumping into development. Just like interactive or web design, once the concept, look and feel and user experience is defined, then development can begin. I realize that some development is created simultaneously during the design phase but the project has to be defined beforehand. There is a formal sketch application offered called App Sketchpad www.appsketchbook.com designers can use for sketching. When I was designing an iPhone application for a client, I utilized some references online when creating my designs in Adobe Photoshop. The beauty of these mock-up examples is that you don’t have to create all of the basic iPhone elements from scratch and the pixel aspect ratios are begun for designers. Here are two helpful links below:
iPhone elements for Adobe Photoshop by Geoff Teehan:



http://www.teehanlax.com/blog/ipad-gui-psd/

iPhone elements for Adobe Illustrator: http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
There are visual design tidbits that I found very helpful within the book in regards to the overall design.

• Destructive actions should get special treatment, such as being designed using red. As with any design, consistency in the look and feel of navigation will assist users in understanding their experience.
• Unlike web design where there are up, over and down states to buttons, designers need to design in two states: disabled and selected.
• Limit the screen to two bars: navigation and a tab or toolbar
• Consider the personality you want the design to have to the public. Use this personality to shape the design.
• The app icon is the first impression and the most important design element for the app. Icons in general should be clear silhouettes and have little to no detail. It is good to add labels to icons. Make sure it describes the app’s function, interface, name or brand.
• Realistic interface elements invite touch. Use the physical world for graphical elements, but make sure they are relevant to the controls.
• Use everyday objects as a metaphor for the interface. For example, a musical app that mimics the appearance of a piano or a bookshelf for browsing books. The reason for this is that experience informs gestures.

As a designer I always ask the client to tell me how I can create a look and feel that really gets to the core of what one wants visually to a design. Not only do I want to create realism and mimic everyday object, but also how can I create realism that will not cause the files to become overly large for the developer? Clark did just that for me. I have listed them below. I find that a lot of these techniques are very similar to the old web design 2.0 methodologies.

• Bright colors should be used to draw attention to an area. However, they can cause readability problems in bright sunlight due to glare.
• Use custom colors and graphics to custom controls along with textural elements, which will help a realistic look and feel.
• Use Apple’s signature gloss to one’s advantage when wanting to create a gradient effect to a toolbar.
• Clark suggests to only create slight changes to familiar controls to the user such as for chatting replacing a standard dot with a speech bubble.
• The standard elements can be changed with color tints and background images can be added. A designer has to remember that if you tint one toolbar, you have to tint them all consistently.
• High contrast is important. When working with fonts, gray text needs to be avoided against a white background and black is favored.
• The standard iPhone font is Helvetica. Clark states that it is best to not stray away from that typeface. Users can utilize other typefaces in logos and graphics. Serif fonts can be used for large amounts of text, such as an article.
• Organic textures add luxury to the design and should be utilized as much as possible.
• Use a gentle radial or linear gradient in Adobe Photoshop on elements to suggest top lighting or add a light and dark line between elements to create a beveled border.
• Add only a 1-3 pixel drop shadow in Adobe Photoshop to create depth. Color variation with borders can also be utilized to achieve this effect. Similar to web design, drop shadows can be used for text to create raised or embossed for buttons.
• Keep borders clean with sharp outlines. Jagged areas distract the user.

So what elements can a designer change within the interface without creating problems? After reading this book, I realized that it is indeed effective to not create apps that are blue, white with pinstriped backgrounds that are bland. Designers have the option to create interfaces with style and personality just like with interactive or web design. Developers and designers can use Apple’s stock controls and basic elements in conjunction with interesting visuals or add additional graphical imagery. For example, there are standard icons for toolbars and navigation bars, standard search bars with results, and standard tab bar icons. Many of these elements are in the Adobe Photoshop template image seen above by Geoff Teehan. As long as the standard controls are within the application and the design follows the wireframe, designers can make the app look fresh and have the personality desired.

I learned through reading Designing Great iPhone Apps by Josh Clark how to create high quality, polished apps that succeed in providing great design solutions. Experienced designers know the best practices for web, interactive or application design. One can conclude that when learning about mobile design, many of the techniques and methods are similar. However, some are vastly different. I hope this article brought you some insight in designing for a mobile platform from a designer’s perspective and brought you as much excitement as Clark’s book did for me.