Mobile web design:	 how	to	create	      your success story
Content1.	 Take	mobile	web	design	seriously	.................................................................................
Take mobile web design seriouslyViewing	 a	 website	 developed	 for	 a	 computer	 screen	 on	 a	 tiny	 mobile	 phone	 feel...
In	 order	 to	 create	 the	 best	 possible	 mobile	 concept,	 you	 should	 get	 a	 thorough	 insight	 into	 your	         ...
Analyze the mobile phones your users haveOf	course	you	can	find	general	information	on	smart	phone	use	in	statistics,	but	...
Define your conceptBecause	mobile	phones	accompany	us	everywhere,	social network sites,	such	as	Twitter,	Facebook,	MySpace...
Choose wisely: mobile site or applicationWhen	you	know	your	audience	and	you	have	defined	your	concept,	you	can	start	 thi...
Decide which technologies are neededIf	 you	 want	 to	 use	 the	 GPS,	 compass,	 3G	 and	 other	 functionalities	 or	 inte...
The right pickBasically,	 choosing	 between	 a	 mobile	 app	 and	 a	 mobile	 site	 comes	 down	 to	 the	 user	 group	     ...
Assist your user by providing easy-to-use interaction methodsNowadays	graphical	user	interfaces	on	computers	are	optimized...
Avoid	graphics	when	they	are	unnecessary,	as	they	make	it	more	difficult	to	load	the	page	quickly.	If	you	do	need	to	use	g...
Create your own success storySo,	knock	yourself	out	creating	your	own	revolutionary	mobile	app	or	website	and	give your bu...
Upcoming SlideShare
Loading in...5
×

SMARCOS HIG Paper Mobile UX Design

508

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
508
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SMARCOS HIG Paper Mobile UX Design

  1. 1. Mobile web design: how to create your success story
  2. 2. Content1. Take mobile web design seriously ................................................................................................................ 32. Get things right from the start: analyze! ................................................................................................... 3 2.1. Get to know your users .............................................................................................................................. 3 . 2.2. Analyze the mobile phones your users have .................................................................................... 5 2.3. Define your concept ....................................................................................................................................63. Choose wisely: mobile site or application? ............................................................................................... 7 3.1. Choose to design for some or for all ..................................................................................................... 7 3.2. Decide which technologies are needed ..............................................................................................8 3.3. Select the road to accessibility................................................................................................................8 3.4. The right pick .................................................................................................................................................94. Face the design challenges ..............................................................................................................................9 4.1. Show your user the way: design a clear navigation plan .............................................................9 4.2. Assist your user by providing easy-to-use interaction methods ............................................10 4.3. Make sure that form follows function ..............................................................................................10 4.4. Test, test and test: listen to your users’ feedback .......................................................................... 115. Create your own success story ..................................................................................................................... 12 2
  3. 3. Take mobile web design seriouslyViewing a website developed for a computer screen on a tiny mobile phone feels like sitting in the front row of an Imax movie theater. You slowly become frustrated because you feel like you’re missing the action and when it’s over you’ll leave with a headache.Viewing a website designed for a computer screen on a phone screen often is an awful experience.You really don’t want to confront your users with such an experience. If users have a bad experience using your product, rest assured that they will avoid it in the future. Even worse, they will discourage their friends and colleagues to try it. A good user experience will gain you loyalty and trust. The user will be motivated to return and will even make publicity for your product. So, as mobile web is gaining more and more followers, it is in your best interest to take mobile web seriously.This white paper will put you on the right mobile design track. The first stop will be a thorough analysis of your users and the mobile phones they use in order to define your concept. The second station will explain the difference between a mobile site and a mobile application. Then we’ll travel onwards to the final destination: design. Buckle up, here we go!Get things right from the start: analyze!Don’t jump into the deep end before you can swim. The beginning of a mobile web success story is always a good analysis. So, how do you get your ducks in a row?Get to know your usersGetting to know your users is a crucial part of the analysis phase. Knowing your users helps you to focus your design on your users, and to address every user group in the appropriate way. So one of the first questions you need to ask yourself is: whom are you reaching out to? Do you have a specific audience, for example teenagers, or a very diverse public? Next, you should try to picture your audience in a mobile context. In general, people use their phones, and therefore the mobile web, on the go. This means mobile web sessions are mostly short. Users need their information as quickly as possible. 3
  4. 4. In order to create the best possible mobile concept, you should get a thorough insight into your users and their exact context by asking the questions when and where. For example, do they use their smart phones when waiting for the bus at a bus stop?Then you can start thinking of the needs or tasks of your users in this mobile context. What do users need or want to do? If we take the example of public transport users a bit further, perhaps they would like to look up which bus to take and whether the bus they’re taking is on time or has been delayed.A couple of useful techniques for charting out your users are task matrices and personas. A task matrix enables you to differentiate between users or user groups based on the tasks they perform. For example, users of a mobile shopping list application could be differentiated in a group that only wants to make a traditional shopping list, and another group that might want to take it a step further by making a shopping list based on selected recipes or circumstances, like a dinner party, for example. Personas, on the other hand, are detailed characterizations of typical users. They may not be actual users, but they are described as such -often using photographs-, which helps you to keep your focus on them. Having a clear idea of who your users are is essential in figuring out how and when these persons would use your product. Personas help you make good design decisions. 4
  5. 5. Analyze the mobile phones your users haveOf course you can find general information on smart phone use in statistics, but those statistics should be taken with a pinch of salt. For example, sales statistics on which phone is sold the most don’t say anything about that phone being used to surf the web. Identifying your users and their smart phones, unlocks the path to the technical specifications you need to dive into. What are the possibilities of their smart phones, the type of browser... Make a comparison of the specifications of the smart phones used by your audience and find the common denominators. The specifications that you should definitely keep an eye out for are screen resolutions, the supported interaction methods, and if you’re thinking of taking things a bit further than the basic stuff, you might also want to check the other functionalities of the smart phones.We’ve already mentioned that designing for mobile is designing for a smaller screen, but before you put your pen to paper, you will want to know the exact size of your canvas. So it’s definitely worth looking at the most common screen resolutions and design for the lowest common denominator.When analyzing the mobile phones of your users, it is important to include the differences between the mobile operating systems (Mobile OS). The OS determines for a large part either the browsers your mobile site needs to work on or the platform for your mobile application.The supported interaction methods not only depend on the operating system, but also on the hardware. It’s always good to check whether the smart phones in your target group have specific interaction methods like a touch screen with a virtual keypad or a fixed keypad with for example a track pad or jog ball for navigation purposes.Check out the technologies supported by the mobile phones in your target group and see if you can put them to use. Most phones have GPRS, Wi-Fi, Bluetooth, EDGE, … but every day new technologies are added. So keep track and link the technologies to your users and their needs. 5
  6. 6. Define your conceptBecause mobile phones accompany us everywhere, social network sites, such as Twitter, Facebook, MySpace... were the first to go mobile. They all revolve around the fact that people want to share personal information with friends, family or the world. So isn’t it great that you can share “what you’re up to” immediately instead of waiting until you reach a computer connected to the Internet?Social network sites have found an easy transition to mobile, but how do you go about?Going mobile is all about toningthings down to the basics and to a size that is manageable on a small screen. Not only is the page size smaller (size of the screen), but you should also limit the number of pages. Mobile phone processors aren’t as fast as those of regular computers so loading a web page on a mobile phone is generally a bit slower.When you define your mobile concept, make your users and their tasks the pivot: What are your users’ most important tasks and needs in an “on the go” context? As a rule, skip everything the user doesn’t necessarily need. Let’s take the following banking example. If you compare money transfers with stock trading, the latter would make the mobile cut. The very nature of stock trading is urgency. It is a fluctuating business based on instant decisions, so a tool that allows users to quickly sell or buy stock would be an added value. Most money transfers are not that urgent. Also because a transfer requires a lot more input from a user, users may still prefer the full online banking tool.If you are converting an existing site to mobile, it might be useful to check the statistics of your site to get an idea of what the most popular functionalities are. Then you need to consider if those functionalities are still useful in a mobile context. “Going mobile is all about toning things down to the basics” 6
  7. 7. Choose wisely: mobile site or applicationWhen you know your audience and you have defined your concept, you can start thinking about how you want to take your concept mobile. Should you go for a mobile application or should you offer a mobile site?To make a well-considered choice, you can fall back on that user analysis you’ve made and go a bit deeper into the technicalities of things. Choose to design for some or for allToday, quite some mobile applications are designed for specific mobile phones. Of course, the strength of having an application built for a specific mobile phone is that the application is entirely optimized for that type of phone. This strength is at the same time the disadvantage of those mobile applications. Developing an app for a specific phone implies that you either target a specific usergroup, or that you need to build and maintain multiple apps to reach out to your entire user base.If you opt for a mobile site, your audience is not limited to the users of a specific type of phone. Every user that has a mobile phone with a browser should be able to access it. 7
  8. 8. Decide which technologies are neededIf you want to use the GPS, compass, 3G and other functionalities or interaction techniques of today’s mobile phones or if users need to be able to consult some of the content when working offline, you should consider building a mobile app for the type of phone that is most popular amongst your target audience. A good example of using the built-in technologies of a specific smart phone is an application to compose a shopping list which sorts the items on your list in the order of the store you are at. In this case, you use the built in GPS functionality of the targeted smart phone.Mobile sites need to work on the browsers that come with different types of smart phones. In that way, the technology that you can use is limited to the capabilities of the mobile browsers. Of course, as technologies advance, the gap between the possibilities of applications and sites will narrow.Select the road to accessibilityAnother big difference between mobile applications and mobile sites is that mobile sites are freely accessible. The content of your mobile site will automatically be accessible through search engines. In order to use mobile applications however, users need to download them from an application store and install them to get them to work. This means that with an application you can enjoy extra publicity when users browse through application stores. On the other hand, to be able to add your app to the store, you need approval of the third party storeowner. 8
  9. 9. The right pickBasically, choosing between a mobile app and a mobile site comes down to the user group you want to target: • Does your target group work with specific smart phones and is the use of technology like GPS essential for your concept? Go for a mobile app on the platform(s) that are most popular with your target group. • If it is important that you reach out to a wide and diverse audience and the use of fancy technologies comes second in line? Choose to build a mobile site that is accessible on any phone with web access.This is a great rule of thumb, but it’s not carved in stone. If you have developed a great application, it will create its own audience. Comparing the pros and cons is always a good idea, but at the end it comes down to one thing: what is the best suitable option for your business model?Face the design challenges When your groundbreaking concept is taking its final shape and you have a clear view on who your users are and the technology they use, you can start designing your site or application.Show your user the way: design a clear navigation planIt is imperative for every app or site to offer the user a clear workflow. So start with high-level wireframes and navigation flows before you go into a detailed design of every page. This enables you to nip any flaws or gaps in the bud at an early stage, and prevents you from wasting time on the detailed design of pages that don’t make the final cut.Limit the number of pages or screens to what is really necessary and keep the structure of the mobile site or application as flat as possible.Spend enough time thinking through how the user will navigate from one page to another. Navigation as we know it on full sites will be fairly complex on a smaller screen, so optimize yournavigation for a smaller screen size. For example, it might be better to group navigation options in one main control than to make all options visible.You could also make mobile navigation easier on your users by redirecting them to your mobile site when detecting that they are using a mobile browser. 9
  10. 10. Assist your user by providing easy-to-use interaction methodsNowadays graphical user interfaces on computers are optimized for using a mouse as an input device. Guess what: mobile phones don’t work with mice. At best, they include a stylus, track pad, track ball, joy stick as a pointing device, but keep in mind that there are subtle differences. As a rule, make everything that should be clickable large enough. When using a touch screen phone, nothing is more irritating than not being able to click on an item.Optimize the interaction patterns of your product to the interaction methods that are supported by the smart phones of your target group. Users of touch screen phones will be used to different interaction patterns than users of a classic keyboard phone.When using non-typical interaction patterns, especially for the touch screen phones, consider using watermark patterns. These patterns are a sort of demo instructions that show the user how to do something, for example pinching on an iPhone. If the phone has a fixed keyboard, consider implementing quick access keys. This means that you can make certain functionalities or pages accessible by pressing button 0-9 on the phone keyboard.When dealing with non-touch-screen phones you need to indicate on the screen what the function of some variable hard button is. Make sure you use clear labels so that your audience will know immediately what the result of the button click will be.Nobody likes typing long texts on a small keyboard, whether fixed or virtual, so try to limit text input. Make sure that form follows functionIn traditional web design a lot of attention is spent on an elaborate graphical design. For mobile design, whether site or app, the graphical design is subordinate to the function and content. The graphical design has to be tight and limited because there is just not enough room for fancy decorations. As the size of the screen is limited, try chunking the information so that one chunk fits the content of 1 page. You don’t want the user to spend his limited time scrolling up and down or left to right to view the information he needs. To give users direct access to the most important functions or information (for example, search field / latest news item) show those items at the top of the page. 10
  11. 11. Avoid graphics when they are unnecessary, as they make it more difficult to load the page quickly. If you do need to use graphics, provide the user with options, for example to leave out the pictures when loading the page. Also make use of the alt-tag to provide a short description of the picture. This description will then be visible if users prefer not to load the pictures. Mobile design is different, but that doesn’t mean that the look-and-feel can’t be aligned with that of your normal site/application. Stay close to what the user knows and already uses.Test, test and test: listen to your users’ feedbackIt is always important to test your design with real users. So, why not subject your mobile site or application to usability tests performed by those end users, with their specific mobile phones, who you’ve kept in mind during the entire design process?Usability tests can be performed on a finished product, but it is always better to test as early aspossible, for example on a mockup or a prototype. It is more cost-effective if you make changes to the design than if you need to change a developed product. The usability tests should give you an answer to the following questions: • Are your users able to do what they want to do? • Are your users able to do it efficiently? • How do your users feel while doing this? Do you provide a rich and addictive experience?If you receive positive answers on each of the questions, you are on the right path to your mobile success story. If one of the answers to the questions is negative, your design still needs some tweaking. 11
  12. 12. Create your own success storySo, knock yourself out creating your own revolutionary mobile app or website and give your businessa boost! Be creative and innovative, because the technology to develop killer mobile apps and sites is here today.But don’t forget to pack the right user-centered design techniques for your journey. A rich and addictive user experience is the difference between being a one-hit wonder or creating something with staying power.If you need some help, contact Human Interface Group. Together we can give technology a human face.Author: Hilde Van HorenbeeckAbout Human Interface GroupHuman Interface Group is Europe’s leading usability consultancy. Human Interface Group has been coordinating usability projects for almost 20 years for a wide variety of larger and smaller companies and public authorities. We also have access to an extensive network of usability professionals throughout the world. Human Interface Group is a partner in the International Usability Partners network, an established network of independent usability companies who have joined up to provide user experience services worldwide, from North America to the Far East.Curious about how we can help you understand usability?Visit www.higroup.comMail info@higroup.comCall +32 (0) 15 40 01 38 12

×