Mobile GUI Design - Web Designer Magazine Article
12 likes3,828 views
Mobile design has become more important as smartphones and touchscreens have proliferated. Designing for mobile interfaces requires different constraints and considerations than desktop or web design due to smaller screens and touch-based interactions. The article discusses why mobile design matters and the nuances of designing native mobile applications versus mobile web applications. It highlights direct manipulation as a key difference in interacting with touchscreens versus mice.
Mobile GUI Design - Web Designer Magazine Article
- 1. MOBILE DESIGN MOBILE DESIGN iPhone ap desig p designer Jen Gordon desc ning for the smaller screen in ribes the creative process be this specialist visual mastercl ass hind seems like a no-brainer. Wh ether applied to designing O years, the web design s, VER THE LAST few mobile operating system e become sites, GUIs, apps, or indeed s on screen size s hav and demand and mobile design world there are new constraints than ever before. embraced. more closely entwined and interfacing that must be for mobile have been trate the creative workflow The cumbersom e and clunky days of WAP In order to illus tha t device technology has don of iPhone app agency consigned to history now design we’ve asked Jen Gor some ine experiences on the example-packed look at begun to offer genuine onl ly Clever Twist to give us an bile App le’s iPhone has probab way we’ll look at why mo move. Love it or loathe it, ent around a of the key facets. Along the s associated and excitem ht the nuance done most to spark interest design matters and highlig rnet service and certainly h producing native and web -based mobile ma ss consumer mobile inte captured wit defined the ma rket for mobile apps. It has applications – from concept to design. our mode of interaction with There’s also time to get a word with market our imagination for a new of smartphones successful handsets, and spawned a new ‘4G’ series experts and des igners to get their take on e to push boundaries. a brief look at the areas so or superphones that con tinu mobile projects and even such ’s latest BlackBerry and the dern mobile experience, Throw the Palm Pre, RIM have synonymous with the mo On e into the mix and you brand new Google Nexus te the as icon design. bile phones set to domina ter time to make the leap a formidable army of mo There’s never been a bet ta it guarantees your conten scene for years to come. igners? Why into mobile design and if ’t afford to ignore So what does this mean for web des definitely can and brighter future then you audiences are widening sho uld we care? Well, if web n it it any longer! a new area of demand the we can apply our skills to th ow ur/c or Aboutdon,e anethreative director Nexus One iPhone ry n Gor Je shop Clever Twist, of mobile design girls lyrics to r Black Ber enjoys teaching he d blogging s, an Dolly Parton song at www. about mobile design mobilelove.org. Palm Pre 34 | Web Designer 034-041_WD_167.indd 1 22/1/10 16:42:27
- 2. In years past, design for mobile has not been a hot topic in the design commu only a few years old, the DOS screen aesthetic abounds. However, since the nity. In smartphones MOBILE DESIGN smartphones, interest in the mobile GUI (graphical user interface) has madelaunch of touch-screen Designers are looking for ways to break into this exciting new field of designa radical turnaround. article is to define why design for mobile matters, and highlight the nuance . The purpose of this and web-based mobile applications. s of designing native Designing for Web vs. Mobile Unless you’ve been living under a rock, you’ve probably heard • Direct manipulation of content. On touch-screen devices, users have the ability to manipulate objects in a much more tangible manner than on a desktop application. that designing for mobile is different than designing websites There is no intermediate device like a mouse, only direct or desktop applications. And the differences are multiplying touch with the fingers that allows users to interact. rapidly as more devices with additional functionality hit the • Feedback based on time and location market. So why does design for mobile matter? Let’s take a look at the differences between web vs. mobile to get a better understanding of how users interact with each platform. Design Considerations There are many unique design considerations when designing The US A Toda example of a hy y app is a gr eat brid app for mobile, and those considerations start with knowing the Desktop hardware and operating system you’re working with. You don’t Web vs. Native Apps For the purposes of this article ‘desktop’ refers to laptop/ have to purchase lots of mobile devices, instead visit the app desktop-based websites, web apps and applications. We don’t store for the respective operating system (eg iTunes App Store, think of this hardware as interactive in the same way as mobile. Android Market found on Android handsets). From there take a What’s the difference between web-based, We’re not going to pick up and tilt our monitors. In fact the tactile look at apps that have a solid design aesthetic. If a developer has hybrid and native apps, and why does it interactions are typically limited to: spent time on the GUI, it’s likely they also spent time on usability matter to designers? First let’s address the “what”. Web-based mobile applications are and flow. The idea in mobile is not to convert but to create. Take built using your standard HTML, CSS, and • Mouse clicks lessons from mobile apps that have done an elegant job of JavaScript while native apps use the software • Keyboard porting their desktop web presence to mobile. development kit and native programming • External tablet and pen language for that operating system. Hybrid apps • Microphone input are a mixture of the two, for example an iPhone • Speaker audio output Design for the Mobile Context app such as USA Today pulls in dynamic web The dictionary defines context as “the parts of a discourse that content while utilising C+ to code the shell that surround a word or passage and can throw light on its meaning”. pulls in that data. Mobile In more practical terms, context enhances our experience or Who cares, you might ask. Why does it matter? Like it or not, developing for mobile Mobile is a completely different animal. It’s people-centric. After understanding of people, places, things and situations. Providing requires some technical knowledge of the all, think of what we call it – a handset. It fits in our hand, our context takes apps from good to great. platform you’re developing for in order to create pocket, next to our wallet. It’s a phone, it’s social, it’s personal. It For example, two of the most unique features of mobile the graphics to the proper spec. Additionally it has a ton of interaction points: devices is the ability to detect time and location. Planning for helps to know the capabilities of web vs. native ways to take advantage of this data is essential. Let’s say you to understand what functionality you can design • On-screen touch keypad want to build a coffee finder app that lists all coffee shops for and which you cannot. When considering • Gestures within a ten mile radius of your location. Sounds like a useful hybrid apps know you can combine the • Mic input that can result in an immediate action application, but how can you make it better? The device already functionality of both. • Sound feedback upon interaction Web-based apps allow usage of most knows the exact time when the user is searching, why not functions that would typically work in desktop display only the coffee shops that are open? browsers. However, they are not able to respond to hardware inputs the same way a native app can. For example, they do not allow Create an Elegant Solution on usage of the accelerometer (which detects a Small Screen shaking and positioning of the phone), audio input via mic, robust audio feedback options, Mobile device screens are smaller than desktop camera/video integration, or the native monitors, but what does that really mean? Size animation capabilities. things down? Squeeze them in? The temptation Native apps allow all of the above items but may be to make things simply ‘fit’ into a smaller cannot connect to web-based content. The app screen, when just the opposite is true. is static until it’s updated and re-submitted to Even when you’re trying to communicate the App Store. Many apps are going the hybrid route to allow dynamic content to flow into a many things to the user, less is more. Your native shell. primary goal from a design standpoint is to create a simple, elegant solution that’s easy “ Like it or not, to use. Localisation Mobile apps are unique with regard to developing for mobile requires worldwide proliferation. Many app developers are targeting global markets for their apps and some technical guess what? This impacts design. For example, your app includes in-app purchasing for global app stores. Your checkout button looks great Above : An extreme example of an app that HAD to simplif y when you mock up “Buy now” in English, but how big does that button need to be when the phrase is knowledge of the platform you’re translated to “покупка теперь” ? Right : The New York Times iPhone app with simplif ied format Designing for Mobile Interaction Unlike design for desktop websites and/or developing for” applications, the variety of ways you can interact Web Designer | 35 034-041_WD_167.indd 2 22/1/10 16:43:05
- 3. MOBILE DESIGN device with and get feedback from a mobile terpart. radically differs from its desktop coun Mobile apps aren’t just pretty pictures, you’re ning for mobile is a developing a piece of software. Desig combination of interactio n, product/industrial and graphic ile touch-screen device design. Think about all the things a mob can react to: touch, shak ing, tilting, vibrating, audio input and With these elements, feedback, location and time tracking. design takes on an entir ely new dimension. It’s your job as a concepting how an designer to consider these features when app will work. you speak. Tons of fun… ity Designing for Scalabilhave a user base are destined to Mouth Off moves illustrated mouth s to the words products, apps that Like most time. Feature requests are change in some way or another over made, bugs reported and content needs to be added, among plans for the app and other things. Thinking about long-term anticipating features that will be requested down the road can app later. This applies to save you a lot of time re-designing the Mobile technology both utilities and games. A good example is the casual game Mouth Off. When the app initially launc hed, they only had one set of mouths to choose from, the Signature Mouths. As the tor We speak to Andy Betts, edi accommodate for those , app added more mouths, they had to of Smartphone Essentials additions in the layout. for his view on how the new generation of devices is impacting on the way we view Designing to Help Users HelpisThemselvan es mobile interaction ide application design, the goal to prov In mobile predicts the next step and The advent of the iPhone turned application that thinks for the user. It to get there. Providing a conventional wisdom abou t mobile provides simple and implicit controls devices on its head. Before 2007 each ‘help’ screen or ‘how to use this app’ screen should set off an tecture, flow and control generation of mobiles simp ly had to be alarm in your brain that the app archi smaller yet more powerful than the last, Postage makes it easy to send labelling needs rework. To illustrate the idea of being implicit s you what to do but Apple’s approach brou ght the user cute picture cards to friends Subtle in-line call-out tell and intuitive let’s take a look at the Posta ge app. It is a prime lot experience to the fore, and put the screen example of an app that could be easily bogged down with a focal point of the hardware . but instead has a fluid, as the menus of controls, text and navigation blunders, It was revolutionary. Endless replaced organised, intuitive flow. and nested submenus were built around by a more human interface entirely a series of gestures that were pinching: intuitive. Touching, swiping, ld use when the same gestures you wou ucts sat on working with physical prod ely your desk, and producing an entir the software holistic experience where in unison. and hardware were working e works in a Every function on the phon a part of the OS, uniform way, whether it be interacting with the web or using one of the apps for the platform. era The change ushered in a new of smar tphones, where devices like rphone’ the Google’s self-styled ‘supe spired Palm Nexus One, the iPhone-in e replaced Pre and RIM’s BlackBerry rang leaders in tradi tional names like Nokia as mobile inno vation. And then it fad es out You go into many levels of functionality s likely to Google’s Android OS look marketplace dominate the smartphone presents some in the years to come, but it rs, not-insignfica nt challenges to develope s One is however. Although the Nexu smartphone Google’s vision of what a Motorola, shou ld be, other big names like Sony Ericsson and Samsung also have folio, Android devices in their port platform is and fragmentation of the can currently becoming a concern. You running five buy Android smartphones with at least different versions of the OS four different screen reso lutions, meaning The controls transition nicely and the GUI is rich! design and that compatibility in both d cannot functionality across the boar way from the be guaranteed. It’s a long uniformity of the iPhone. The custom tab bar along the bottom provides image manipulation 36 | Web Designer The nav bar clearly implies what’s next 034-041_WD_167.indd 3 22/1/10 16:43:49
- 4. Types of Apps MOBILE DESIGN There are many categories of apps in the App Store, which can be broken down types of apps. Know where your app falls, and it’ll help you establish proper into four main design boundaries. Ratio calculates your ingredient ratios for you Serious tools • Keep it clean • Establish a clear grid for alignment and layout • Avoid redundant controls • Get things out of the way of productivity • Use ‘implied’ graphics • Visually prioritise info using typography and colour Southwest Airline s uses icons, colour and a clear layout to help its customers take care of busine ss Colour, implied graphic s help visualise the numbers quickly Serious Entertainment Have the same characteristics of Fun Games, but with added depth in virtual realities and role-playing. • Graphically rich, commonly have storylines to follow Fun Tools • Single screen, maybe one level deep at most • Efficiency focused, large buttons, legible from 5ft away • Moderately graphically rich • Show path to productivity and flatten the hierarchy • No more than two-to-three levels deep Outside is a Skies Of Glory recreates the graphically experience of being a WWII pilot rich app with a practical function. Forecasting the weather! Kroll is a storyline-based, multiplay er game Charadium is an interac tive, Fun Games multiplayer game of mobile Convertbot makes conversions fun charad es • Intensely graphical • Fall outside of the standard operating system user interface • Move away from a hierarchical navigation • Get into playing game immediately • Multi-touch gestures • LOUD visual feedback • “Success” pop up or audio feedback “Yaay!” • Tell users when they do something right or wrong Soft Freak Fiesta includ es uber-rich graphic s and global multiplayer gaming Web Designer | 37 034-041_WD_167.indd 4 22/1/10 16:44:17
- 5. MOBILE DESIGN e cases this can make this you need to leave strong static imagery. In som for mobile devices, fingers/thumbs. To add to that require I absolutely adore designing ce for long er downloads, but on sites ample room betw een buttons to allow the devi wait. If a as it’s one of the few oppo rtunities that you get visual punch, I believe it to be worth the to pick up the user’s choi ce accurately and make lly lution and don’t have site is trying to sell som ething that relies on visua to work within a fixed reso to be easily pressed. This rent resolutions. the buttons large enough e or movie, then the site to worr y about the issues of diffe annoying hurdle, rich media, like a videogam g could initially be interpreted as an the best of its ability. This essentially allows you to create somethin it allows needs to showcase that to but I personal ly see it as fun challenge, and design is truly unique and bespoke to the targeted device, , The future of mobile interface and web you to create some reall y sexy, made-to-measure d ing short of a dream pretty exciting, as ever since the iPhone introduce and for a designer, this is noth interfaces and designs. leading to an ever come true. sing, it’s rare that multi-touch technology, it’s of iPhone games, Regarding mobile web brow rience, and this is only I’ve worked on a number dedicated evolving interactive expe companies are willing to devote funds to with creating the core interface and HUD elements, r going to grow as time goes on. Couple this mobile sites (other than large companies with large s you have to take into technology, allowing and there are so many thing case that I use some basic the ever increasing leaps in a fat finger budgets), so it’s often the e processor-intensive account. Navigating an interface with ing to keep mobile us to experience faster, mor have rules in my design when need some mobile is worlds apar t from a delicate mouse. You nce on heavy expe riences; we truly are in for lly Illustrated browsing in mind. I try to minimise relia user’s hands are going s! I for one cannot wait! to think about where the interactive treat l Heald,teFu.com JavaScript and Flash and aim to make impact with button is to their key Michaellyillustra d to sit and how close each www.fu le and usable controls. content provides a way to design simp The Design Process If you are a designer, the good Market Research Depending on the type of app you’re a good idea to working on, it’s always do some market research around the type of Mobile app site maps differ from webs apps should not prese ite site maps as mobile nt the user with multiple ways to get one place. One door to one room, that’s to it. Mobile users don’t a lot from those who have news about mobile apps is app to be designed. You can learn competition is doing and have time to make a wrong move then go ‘back’ and try to find design is everything. Whether gone before you. Find out what your the proper path. think about how you can not only make it better, but deliver a you’re building a utility or a antly surprised! surprising twist. Users love to be pleas game, appearance has a great impact on usability. Cluttered or Paper Pro will ping Wireframing and case scenariostotydefine the content disorganised apps are difficult Target Audienceaudience is very important in defining a cted from the Data colle on the screens defined in and controls that need to be present to understand, and hard to use. your target Knowing . From there you have to design a prelim inary layout the site map This isn’t to say that a ‘serious design style, typography and layout. Does your app appeal to design elements. Define a grid, that accounts for each of these tool’ should be embellished with accountants or 18-25-year -old gamers? Having this information and design from the top onas’ is essential to establish importance of information an overdone GUI. A great app and diving even deeper to develop ‘pers down. Ergonomically speaking, users hold touch-screen mobile design balances appearance understanding what the demographic wants to see, and the thumb position is typically devices in a way that the fingertip and with function. context in which they’ll use the app. pointed towards the top of the screen. This brings their eye d college student in In term s of function there are For example, Mike Todd is an 18-year-ol towards the top and tells you as a desig ner “hey, put the most about Mike. He is in college, areas of app development that New York City. This tells us a lot more important and general categ ories of info towards the top!” around other students his age, most with similar schedules. can move on and off are not the ‘designer’s job’ per r interaction. Would we Consider the variety of ways content Mike may want a game with two-playe screen. For example, mobile sheets are a great way to hide se, but have a great impact on have thought of two- player interaction if we only knew Mike ’s y to use them. actionable controls until the user is read the design conceptually and in age? Depending on the app, maybe or maybe not. Regardless, wants to be bogged down with Minimise user input. Who the development of a creative drawing out personas brings richness to your brainstorming with a Picker Table so entering a bunch of text? Provide users direction. If you are working on and helps draw out functionality that’s impo rtant to your target they can select a choice from a menu instead. an app, and these jobs are not audience, and important to the design. In mobile design, paper prototyping will save you lots of time. being filled, find someone who Much like any design or illust ration process, having iterations has these skills or give it a try of your design allows you to explore a wider variety of design yourself. Skipping these steps can Use Case nas areariosed, the characters need to be placed Scen options to a deeper degree. And with paper prototyping there’s lead you down a costly path of Once perso defin . Where are the users that in relevant, true-to-life circumstances revisions when it’s found the app by car use the app? Are they on foot, is missing functionality or has a poor flow. or travelling by train? 43-year-old Bill is driving to a meeting in London and wants to stop for a cup of coffee. Should the app require that Bill tap the screen several times before finding his coffee shop? Thinking through the variety of circumstances users find themselves in, and dialling in on scenarios where certain functionality repeats, is the key to defining what screens you will be designing. Site mapfor mobile are critical Site maps to design. To design a flow that’s intuitive, understanding the relationship of content to other lace Your The pap er prot otype for Rep Face cat egory scr een 38 | Web Designer 034-041_WD_167.indd 5 22/1/10 16:45:05
- 6. less ‘risk’, less attachment to a scrap of paper than a Photoshop file. For example, working on Post-it notes is useful in being able to re-order, add or delete screens until the flow is right. MOBILE DESIGN Focus on the App’s Primary Task The most enjoyable apps establish and maintain focus on one primary task. To do this you must determine what that primary task is by creating a product definition statement, a concise explanation of your app’s main purpose and its intended audience. Pick the few features most frequently used by the majority of your users, most appropriate for the mobile context. A quick way to do this is to fill in these blanks for the application you’re working on: (Your differentiator) (your solution) for (your audience) Here’s an example for iPhone’s ‘Photos’ app: Easy-to-use digital photo sharing for casual iPhone users. The primary focus of Sound Hound is to find song lyrics. The first screen you see minimises user input by requiring only one tap for a song to be identified. The action is fast and the result is immediate. From there the user has the option of drilling down life easy into more detailed information about the song. Thanks Sound Hound for mak ing What’s the number one thing you want to do when you open a recipe app? Epicurious clearly understood its target audience and the primary task it wanted to complete. All I want is to find a recipe and Epicurious gets that Design Tools & Image Specs “The most enjoyable Designers who are new to mobile often ask “How are apps created? What kind of software tools are necessary?” You’ll be happy with the answer. Tools of the trade for mobile designers are the same as your typical web/web application design tools (Photoshop, Illustrator). The general rule is to export all graphics apps establish and maintain focus on for native applications in web-optimised transparent PNG-24 format. If you’re creating graphics for a web-based application, you can export web-optimised .gif or .jpg or PNG-24 images. For free downloadable templates visit: http://templates. mobilelove.org. one primary task ” Similar to web design, the software program of choice is Photoshop, as you can easily slice out graphics and get pixel- precise and still manipulate images as vector graphics with iPhone specs shape layers. And the final design Web Designer | 39 034-041_WD_167.indd 6 22/1/10 16:45:46
- 7. MOBILE DESIGN DESIGN Plan for backgroundn in Flash design, the need for planning Typographygraphy in mobile’srecently is the conversatmoot Animatio is To say that typo yesteryear has been a ion Unless your point is an understatement. Only n is not omnipresent. With When designing for mobile the for animation in traditional web desig even possible, with more phones allow ing wider varieties of not mimicking the fluid touch cations. small screen should not be mobile apps, however, if you’re taking advantage of the typefaces throu gh the native OS and web-based appli interface with animations you’re not hy for mobile apps: a barrier to creativity or letting to the interface. Below are best practices in typograp graphy on the web, design aesthetic animations bring Choose your serifs wisely. Similar to typo your imagination run wild. No s of copy is recommended matter what the subject of using sans-serif fonts for large block for readability purposes. the app, your goal should be to deliver a high-fidelity user Design around Device res. Totperform actions on a Inpu The Guardian is an example of how serife d fonts are necessary adequate touch-screen gestu Design for to maintain bran d identity. This app is proof that with interface. Even applications that touch-screen device, users use their finge rs to swipe, drag, leading, proper kerning and font size, serifed fonts can be an fall into a ‘utility’ category can pinch, tap and flick on-screen elements. elegant solution. have fresh, tactile design. res into your design background colour it Planning for and integrating these gestu Contrast of the text in relation to the advantage of the ssary to ensure both visibility and read ability. provide a rich user experience that takes layers over is nece es. Keep in mind that unique attributes of touch-screen devic with the device so users are using gestures a lot in apps that ship n. be sure to use them appr opriately so they don’t defy conventio user to pinch/zoom to scroll For example, you wouldn’t require a a list view. Core techniques Contrast ring colour palettes, consider the variety of lighting When explo used. Under bright conditions where mobile devices are fluorescent lighting or on a sunn y day, lack of contrast in text to discern. Even under or graphical elements may be difficult normal lighting conditions, prop er contrast is helpful for those from lighting and screen who may have vision problems. Aside considerations, using contrast in your layout serves to draw the St rongly ack. contra sting colours user’s eye, and encourage action or feedb make it easy to The Guardian’s serifed fonts are tell the time Layout ts are a common tool used in print, web and mobile an important part of its brand… Grid layou rtant to establish a design. For utilities in particular it’s impo clean grid layout durin g your prototyping phase to establish room between click- proper hierarchy, balance and breathing Clear and concise able elements. layout make s life easier for everyone Sound graphical in nature, Sounds tell a story. Although sound isn’t overall it does interact with graphics and add depth to the experience. Using sound as a design element can reduce visual example using the ‘whoosh’ noise by taking the place of text. For noise when an email is sent, rather than having a text alert. Keep of an application, it must in mind for sound to increase the value be relevant, balanced and pleas ing, not an annoyance. the … and they surviv ed trans ition to mobile USABILITYnication Commu AVOIDING OOPSIES Give the user A way to undo/redo. plenty of time to cancel an operation let them know. “Hey buddy this is going minute.” Simple as that and they’ll love to take a you for it. Effective h visual cues in the deskt op world that before it begins, and make sure you alert the user ly destructive action! GRPHICS Showing an animated graphic Many of us are familiar wit to indicate things like download status before they take a potential going on. With , progress effectively exactly what’s gn easy and elegant way s for users to stop bars and wait times are examples of communicate quickly and Desi appropriate nities arise to keep use rs informed and operations that are under way. feedback animations. mobile the same opportu cOS is an irritating ppy! For example, the spinning pinwheel in Ma n within SOUND ha didn’t see that FEEDBACK When users take an actio When designing audible feedback ion was hung up and you to see immediate visual sign, but what if an applicat le that frustration level and you have keep it only to necessary elements and an app, their expectation is make sure the then your design. First visual, doub sounds do not conflict with existing spinning pinwheel? Now change. Plan for these in even a sounds in the lete the app before taking back may le audio or animated feed mobile operating system. For examp d mobile users that will de consider how subt le, you wouldn’t fast-pace r to give users: m. Key things to remembe want to use the ‘incoming mail’ sound be appropriate. for the taps in minute to report the proble your app or users will think they’re gettin g an email REQUEST PROCESSING If a user taps and every time they tap! e to load what they want, you know it will take a whil 40 | Web Designer 034-041_WD_167.indd 7 22/1/10 16:46:23
- 8. MOBILE DESIGN Resist the temptation to decrease line-spacing to fit more information on a page. Give your type plenty of room to stretch d makes out and relax in copy blocks and list views. Avoid bunching up Been Verif ie ta several tapable text elements on the screen. This causes tap- you want to ge confusion and fussy users. back ground check Been Verified is a great example of a list view that very clearly calls out the three main categories of action, with a blurb of detail copy below that does not interfere with the eye dialling in on the three main points. The typography, colour and spacing of Call Of Duty’s list view leaves the user’s eye bouncing all over the screen. Where do I take my first action on this screen? Do I tap on News, Blog, a sub item or arrows? The typography could make this more obvious and intuitive. Volumes 1 & 2 If you’re interested in learning more about typography, The Typography Manual has released a beautiful app that includes Call Of Duty might tools and resources for designers serious about type. have you going AWOL A GUI DISSECTED Key design components of a mobile interface with We Are Vi’s brand new LIV app for LIVING TV SE ARCH Keyword sear ch is familiar users and m to w eb any apps or m browsers rely obile on this as a mod e of navi primary gation – situ top of the sc at ed at the reen BR ANDING page, ONL Like the header on a web mobile cont ent must establish s Mobile a ingle slim L AYOU pps and sit e s T favour a £19 Y .99 identity in a way that doe sn’t compromise screen real estate and m en -lin e form us, o f te at for lis ts each thumbna n using ils and ta image bb e d co form a t ntent to wo-colum n layout DASHBOARD 33 issues, IMAGES Graphic s may be rest ricte d due to the A foo ter row of icons links to key areas of act as quick content, using 2,600+ pages, screen size but they offer an and recognisable way to conv immediate ey information simple and abstract icons across 2 superb DVD editions... quickly while catc hing the eye Exclusive back issue archive featuring every page within a CONTROLS – Make sure your users, not your DON’T OVERDO IT Keep in mind you don’t application, initiate and control action s. The controls fully searchable interface, plus need to alert users of what is about to happen unless there is a delay that is noticeable. have to be easy to understand and remember. all project files and a FREE Web ANIMATION Subtle animation that doesn’t KEEP IT SHORT AND SWEET provide on-screen text, keeping it in When you short, quickly Design 3 book with Volume 2! is very important annoy users is another way to provide feedback to digestable nuggets is preferred. This what a control users and help visualise the results of their actions. for controls, where users should know LABELS Avoid technical jargon and instead focus on user-centric terminology. Be selfless, think will do in a glance. PROVIDE TAPABLE TARGETS On sale now ed size for about your target audience. What words or phrases Sounds obvious, but the recommend are meaningful and intuitive to them? tapable areas on a device like the iPhone is 44px by Usabilit y could make or break the to adequately successfulness of your app 44px. If you want to go smaller be sure mis-taps. BE IMPLICIT The best apps have functionality space your tapable areas to prevent www.imagineshop.co.uk that is implied, rather than expressly stated. 034-041_WD_167.indd 8 22/1/10 16:47:16
- 9. MOBILE DESIGN A nice robot-like face feels welcoming Flight Check has a nice dial/clock that Content Branding & Mobile Icons pops right off the screen , the key is to of an application, or any mobile content When working through the branding e, or be entertained. ile users want to get things don keep it refined and unobtrusive. Mob productive user Staring at a bunch of advertis ements gets in the way of a positive and shine in the icon design, but be sure to not simply experience. Plan for your app brand to two completely different animals, repurpose you r logo for the icon. Icons and logos are you started. are some quick icon design tips to get with expressly different purposes. Here sh A glos sy fini do esn’ t always suit ur GLOSSY OR MATTe?iTunes App Store and you’ll see how Apple the feel of yo te in the Spend a minu fr ee ent to app icons, the de sign, so feel has tried to bring a common design elem of icons in this way is also to ditch it glossy-highlight effect. Standardisation S developers too, but becoming trendy with Android and webO you’re going to take the needn’t mean you must follow suit. If your time to make a custo m icon, be sure to communicate with s/gloss be applied to the developers that no standard highlight yourself in Photoshop and The OMG Pirates! icon artwork. If you want a highlight, do it is to ensure consistency an eyecatching image tha have complete control over every pixel t over your design. complet ely me she s wit h the style of the app TELLING STORIES need to tell a story of what users can p Vault ’s icon is a The Soduku icon created dept h the old- icons often Mobile app De spite the gloss, Ap cation that tells nothing ll illustrate d fashione d way, with a touch of Phot oshop expect. An example of a fantastic appli and solid concept and we of the function of the app is Ramp Champ. The application would you ever guess it’s app like Convertbot they icon are both beautifully designed, but single example, but in the case of an face but pushed the a skee-ball application by looking at the icon? were able to use part of the user inter of On the other hand the second, less grap hically rich Skee-Ball concept further by creating a robot-like face to inject a touch just application clearly communicates the app’s function, and personality and warmth. are struggling happens to be ranked #1 in paid apps … Also, check out your competition if you ning for is in a for inspiration. If the project you’re desig at the icons that the highly competitive category, take a look , Android Market and SHORT & SWEET icons is discouraged and negates the entire s on app competition use. The iTunes App Store webOS App Catalog all rely on icons to gain user attention Using word choice. Assuming it doesn’t purpose of designing an icon. Rememb er an application icon is among an often bewildering array of lly , object, concept compromise the user’ s understanding of what the app actua not a logo , it’s a visual representation of a word n’s colour palette, think or operation. If your app is abou t your company, and your does, and works within the applicatio l elements that will cause company logo is a set of recognisable letters, this is an exception about a colour scheme or other visua nicative. This game is to the rule. Otherwise, think about how you would describe that icon to stand out above the rest. Weak design but commu nate on analogies or your app in ten words or less, then mari ed around designing for about skee-ball… te that core message. For additional online resources centr metaphors that communica mobile, check out http://resources.mobilelove.org. ICON ART most successful mobile icons for apps or within My Face? Who wo uld Many of the is app is the phone’s OS feature rich, deep, textu rised graphics often ev er know th graphy. You can often see without featuring a very clear and simple icono about cosmetics evolved from pioneering ing it? very clearly how icon techniques have runn Just because you’re desktop GUIs like Mac OS and Windows. in the limited to 57px by 57px does not mean you take shortcuts h and emphasise the most Beautiful icon, but what does it mean? execution. Look for ways to add dept te what the content behind I’m a gold medalist? important elements that communica the icon does. ose of a mobile Another way to communicate the purp “Think about a user interface within app is to use part of the application’s actually work for every the icon design. Obviously this won’t colour scheme that will cause that icon to There are so many stand out above other options it could have explored the rest” Promin ent logos yield exception or brands can s to the rule s for this 42 | Web Designer 034-041_WD_167.indd 9 22/1/10 16:47:40