Mobile web design: howtocreate your success story

2

Content

1. Takemobilewebdesignseriously................................................................................................................ 3

2. Getthingsrightfromthestart:analyze!................................................................................................... 3

2.1.Gettoknowyourusers............................................................................................................................... 3

2.2.Analyzethemobilephonesyourusershave.................................................................................... 5

2.3.Defineyourconcept....................................................................................................................................6

3. Choosewisely:mobilesiteorapplication?............................................................................................... 7

3.1.Choosetodesignforsomeorforall..................................................................................................... 7

3.2.Decidewhichtechnologiesareneeded..............................................................................................8

3.3.Selecttheroadtoaccessibility................................................................................................................8

3.4.Therightpick.................................................................................................................................................9

4. Facethedesignchallenges..............................................................................................................................9

4.1.Showyourusertheway:designaclearnavigationplan.............................................................9

4.2.Assistyouruserbyprovidingeasy-to-useinteractionmethods............................................10

4.3.Makesurethatformfollowsfunction..............................................................................................10

4.4.Test,testandtest:listentoyourusers’feedback.......................................................................... 11

5. Createyourownsuccessstory..................................................................................................................... 12

3

Take mobile web design seriously

Viewing a website developed for a computer screen on a tiny mobile phone feels like sitting inthefrontrowofanImaxmovietheater.Youslowlybecomefrustratedbecauseyoufeellikeyou’remissingtheactionandwhenit’soveryou’llleavewithaheadache.

Viewing a websitedesignedforacomputerscreenon a phone screen often is an awful experience.

Youreallydon’twanttoconfrontyouruserswithsuchanexperience.Ifusershaveabadexperienceusing your product, rest assured that they will avoid it in the future. Even worse, they willdiscouragetheirfriendsandcolleaguestotryit.A good user experiencewillgainyouloyaltyandtrust.Theuserwillbemotivatedtoreturnandwillevenmakepublicityforyourproduct.So,asmobilewebisgainingmoreandmorefollowers,itisinyourbestinteresttotake mobile web seriously.

Thiswhitepaperwillputyouon therightmobiledesign track.Thefirststopwillbea thoroughanalysisofyourusersandthemobilephonestheyuseinordertodefineyourconcept.Thesecondstationwillexplainthedifferencebetweenamobilesiteandamobileapplication.Thenwe’lltravelonwardstothefinaldestination:design.

Buckleup,herewego!

Don’tjumpintothedeependbeforeyoucanswim.Thebeginningofamobilewebsuccessstoryisalwaysagoodanalysis.

So,howdoyougetyourducksinarow?

Get to know your usersGettingtoknowyourusersisacrucialpartoftheanalysisphase.Knowingyourusershelpsyoutofocusyourdesignonyourusers,andtoaddresseveryusergroupintheappropriateway.

Sooneofthefirstquestionsyouneedtoaskyourselfis:whomare you reaching out to? Do you have a specific audience, forexampleteenagers,oraverydiversepublic?

Next, you should try to picture your audience in a mobile context. Ingeneral,peopleusetheirphones,andthereforethemobile web, on the go. This means mobile web sessions aremostlyshort.Usersneedtheirinformationasquicklyaspossible.

Get things right from the start: analyze!

4

Inorder tocreate thebestpossiblemobileconcept,youshouldgeta thorough insight intoyourusersandtheirexactcontextbyaskingthequestionswhenandwhere.Forexample,dotheyusetheirsmartphoneswhenwaitingforthebusatabusstop?

Then you can start thinking of the needs or tasks of your users in this mobile context.What dousersneedorwanttodo?Ifwetaketheexampleofpublictransportusersabitfurther,perhapstheywouldliketolookupwhichbustotakeandwhetherthebusthey’retakingisontimeorhasbeendelayed.

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 taskstheyperform.Forexample,usersofamobileshoppinglistapplicationcouldbedifferentiatedinagroupthatonlywantstomakeatraditionalshoppinglist,andanothergroupthatmightwanttotake it a step further by making a shopping list based on selected recipes or circumstances, likeadinnerparty,forexample.Personas,ontheotherhand,aredetailedcharacterizationsoftypicalusers.They may not be actual users, but they are described as such -often using photographs-,whichhelpsyoutokeepyourfocusonthem.Havingaclearideaofwhoyourusersareisessentialin figuring out how and when these persons would use your product. Personas help you makegooddesigndecisions.

5

Analyze the mobile phones your users haveOfcourseyoucanfindgeneral informationonsmartphoneuse instatistics,but thosestatisticsshouldbetakenwithapinchofsalt.Forexample,salesstatisticsonwhichphoneissoldthemostdon’tsayanythingaboutthatphonebeingusedtosurftheweb.

Identifying your users and their smart phones,unlocks the path to the technical specificationsyouneedtodiveinto.Whatarethepossibilitiesoftheirsmartphones,thetypeofbrowser...

Make a comparison of the specifications of thesmart phones used by your audience and findthe common denominators. The specificationsthat you should definitely keep an eye out for arescreen resolutions, the supported interactionmethods, and if you’re thinking of taking thingsa bit further than the basic stuff, you might alsowanttochecktheotherfunctionalitiesofthesmartphones.

We’vealreadymentionedthatdesigningformobileisdesigningforasmallerscreen,butbeforeyouputyourpentopaper,youwillwanttoknowtheexactsizeofyourcanvas.Soit’sdefinitelyworthlookingatthemostcommonscreen resolutionsanddesignforthelowestcommondenominator.

When analyzing the mobile phones of your users, it is important to include the differencesbetweenthemobile operating systems(MobileOS).TheOSdeterminesforalargeparteitherthebrowsersyourmobilesiteneedstoworkonortheplatformforyourmobileapplication.

The supported interaction methods not only depend on the operating system, but also on thehardware.It’salwaysgoodtocheckwhetherthesmartphonesinyourtargetgrouphavespecificinteractionmethodslikeatouchscreenwithavirtualkeypadorafixedkeypadwithforexampleatrackpadorjogballfornavigationpurposes.

Checkoutthetechnologiessupportedbythemobilephonesinyourtargetgroupandseeifyoucanputthemtouse.MostphoneshaveGPRS,Wi-Fi,Bluetooth,EDGE,…buteverydaynewtechnologiesareadded.Sokeeptrackandlinkthetechnologiestoyourusersandtheirneeds.

6

Define your conceptBecausemobilephonesaccompanyuseverywhere,social network sites,suchasTwitter,Facebook,MySpace...werethefirsttogomobile.Theyallrevolvearoundthefactthatpeoplewanttosharepersonal informationwithfriends,familyor theworld.So isn’t itgreat thatyoucanshare“whatyou’reupto”immediatelyinsteadofwaitinguntilyoureachacomputerconnectedtotheInternet?Social network sites have found aneasy transition to mobile, but howdoyougoabout?

Going mobile is all about toningthings down to thebasicsand toasize that is manageable on a smallscreen. Not only is the page sizesmaller(sizeofthescreen),butyoushould also limit the number ofpages.Mobilephoneprocessorsaren’tasfastasthoseofregularcomputerssoloadingawebpageonamobilephoneisgenerallyabitslower.

Whenyoudefineyourmobileconcept,makeyourusersand their tasks thepivot:Whatareyourusers’mostimportanttasksandneedsinan“onthego”context?Asarule,skipeverythingtheuserdoesn’tnecessarilyneed.

Let’s take the following banking example. If you compare money transfers with stock trading,thelatterwouldmakethemobilecut.Theverynatureofstocktradingisurgency.Itisafluctuatingbusinessbasedoninstantdecisions,soatoolthatallowsuserstoquicklysellorbuystockwouldbeanaddedvalue.Mostmoneytransfersarenotthaturgent.Alsobecauseatransferrequiresalotmoreinputfromauser,usersmaystillpreferthefullonlinebankingtool.

Ifyouareconvertinganexistingsite tomobile, itmightbeuseful tocheck thestatisticsofyoursitetogetanideaofwhatthemostpopularfunctionalitiesare.Thenyouneedtoconsiderifthosefunctionalitiesarestillusefulinamobilecontext.

“Going mobile is all about toning things down to the basics”

7

Whenyouknowyouraudienceandyouhavedefinedyourconcept,youcanstart thinkingabouthowyouwanttotakeyourconceptmobile.Shouldyougoforamobileapplicationorshouldyouofferamobilesite?

Tomakeawell-consideredchoice,youcanfallbackonthatuseranalysisyou’vemadeandgoabitdeeperintothetechnicalitiesofthings.

Choose to design for some or for allToday, quite some mobile applications are designed for specific mobile phones. Of course, thestrengthofhavinganapplicationbuiltforaspecificmobilephoneisthattheapplicationisentirelyoptimizedforthattypeofphone.Thisstrengthisatthesametimethedisadvantageofthosemobileapplications.Developinganappforaspecificphoneimpliesthatyoueithertarget a specific user group,orthatyouneedtobuildandmaintainmultipleappstoreachouttoyourentireuserbase.

Ifyouoptforamobile site,youraudienceisnot limited to the users of a specific type of phone.Everyuserthathasamobilephonewithabrowsershouldbeabletoaccessit.

Choose wisely: mobile site or application

8

Decide which technologies are neededIf you want to use the GPS, compass, 3G and other functionalities or interaction techniques oftoday’smobilephonesor ifusersneed tobeable toconsultsomeof thecontentwhenworkingoffline, you should consider building a mobile app for the type of phone that is most popularamongstyourtargetaudience.

A good example of using the built-intechnologies of a specific smart phone is anapplicationtocomposeashopping listwhichsorts the items on your list in the order ofthestoreyouareat. In thiscase,youuse thebuilt in GPS functionality of the targetedsmartphone.

Mobile sitesneedtoworkonthebrowsersthatcomewithdifferenttypesofsmartphones.Inthatway,thetechnologythatyoucanuseislimitedtothecapabilitiesofthemobilebrowsers.Ofcourse,astechnologiesadvance,thegapbetweenthepossibilitiesofapplicationsandsiteswillnarrow.

Select the road to accessibility Anotherbigdifferencebetweenmobileapplicationsandmobilesitesisthatmobilesitesarefreelyaccessible.Thecontentofyourmobilesitewillautomaticallybeaccessiblethrough search engines.

In order to use mobile applications however, users need todownload themfromanapplication storeand install them togetthem to work.This means that with an application you can enjoyextra publicity when users browse through application stores.Ontheotherhand,tobeabletoaddyourapptothestore,youneedapprovalofthethirdpartystoreowner.

9

The right pickBasically, choosing between a mobile app and a mobile site comes down to the user groupyouwanttotarget: • DoesyourtargetgroupworkwithspecificsmartphonesandistheuseoftechnologylikeGPS essentialforyourconcept?Goforamobile appontheplatform(s)thataremostpopularwith yourtargetgroup. • If it is important that you reach out to a wide and diverse audience and the use of fancy technologiescomessecondinline?Choosetobuildamobile site thatisaccessibleonany phonewithwebaccess.Thisisagreatruleofthumb,butit’snotcarvedinstone.Ifyouhavedevelopedagreatapplication,itwillcreateitsownaudience.Comparingtheprosandconsisalwaysagoodidea,butattheenditcomesdowntoonething:whatisthebestsuitableoptionforyourbusinessmodel?

Whenyourgroundbreakingconceptistakingitsfinalshapeandyouhaveaclearviewonwhoyourusersareandthetechnologytheyuse,youcanstartdesigningyoursiteorapplication.

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-levelwireframesandnavigationflowsbeforeyougointoadetaileddesignofeverypage.Thisenablesyoutonipanyflawsorgapsinthebudatanearlystage,andpreventsyoufromwastingtimeonthedetaileddesignofpagesthatdon’tmakethefinalcut.

Limit the number of pages or screens to whatis reallynecessaryandkeep thestructureof themobilesiteorapplicationasflataspossible.

Spend enough time thinking through how theuser will navigate from one page to another.Navigationasweknowitonfullsiteswillbefairlycomplex on a smaller screen, so optimize your navigationforasmallerscreensize.Forexample,itmightbebettertogroupnavigationoptionsinonemaincontrolthantomakealloptionsvisible.

Youcouldalsomakemobilenavigationeasieronyourusersbyredirectingthemtoyourmobilesitewhendetectingthattheyareusingamobilebrowser.

Face the design challenges

10

Assist your user by providing easy-to-use interaction methodsNowadaysgraphicaluserinterfacesoncomputersareoptimizedforusingamouseasaninputdevice. Guess what: mobile phones don’t work with mice. At best, they include astylus, track pad, track ball, joy stick as a pointing device, but keep in mindthattherearesubtledifferences.Asarule,makeeverythingthatshouldbeclickablelargeenough.Whenusingatouchscreenphone,nothingismoreirritatingthannotbeingabletoclickonanitem.

Optimize the interaction patterns of your product to the interactionmethods that are supported by the smart phones of your targetgroup. Users of touch screen phones will be used to differentinteractionpatternsthanusersofaclassickeyboardphone.

When using non-typical interaction patterns, especially for the touchscreen phones, consider using watermark patterns. These patterns area sort of demo instructions that show the user how to do something, forexamplepinchingonaniPhone.

Ifthephonehasafixedkeyboard,considerimplementingquick access keys.Thismeansthatyoucanmakecertainfunctionalitiesorpagesaccessiblebypressingbutton0-9onthephonekeyboard.

Whendealingwithnon-touch-screenphonesyouneedtoindicateonthescreenwhatthefunctionofsomevariablehardbutton is.Makesureyouuseclear labels so thatyouraudiencewillknowimmediatelywhattheresultofthebuttonclickwillbe.

Nobodylikestypinglongtextsonasmallkeyboard,whetherfixedorvirtual,sotrytolimittextinput.

Make sure that form follows functionIn traditional web design a lot of attention is spent on an elaborate graphical design. Formobile design, whether site or app, the graphical design is subordinate to the functionand content.The graphical design has to be tight and limited because there is just not enoughroomforfancydecorations.

As the size of the screen is limited, trychunking the information so that one chunkfits the content of 1 page. You don’t want theuser to spend his limited time scrolling up anddownorlefttorighttoviewtheinformationheneeds. To give users direct access to the mostimportant functionsorinformation(forexample,search field / latest news item) show thoseitemsatthetopofthepage.

11

Avoidgraphicswhentheyareunnecessary,astheymakeitmoredifficulttoloadthepagequickly.Ifyoudoneedtousegraphics,providetheuserwithoptions,forexampletoleaveoutthepictureswhenloadingthepage.Alsomakeuseofthealt-tagtoprovideashortdescriptionofthepicture.Thisdescriptionwillthenbevisibleifusersprefernottoloadthepictures.

Mobiledesignisdifferent,butthatdoesn’tmeanthatthe look-and-feel can’tbealignedwiththatofyournormalsite/application.Stayclosetowhattheuserknowsandalreadyuses.

Test, test and test: listen to your users’ feedbackItisalwaysimportanttotestyourdesignwithreal users.So,whynotsubjectyourmobilesiteorapplicationtousabilitytestsperformedbythoseendusers,withtheirspecificmobilephones,whoyou’vekeptinmindduringtheentiredesignprocess?

Usability testscanbeperformedonafinishedproduct,but it isalwaysbetter totest as early as possible,forexampleonamockuporaprototype.Itismorecost-effectiveifyoumakechangestothedesignthanifyouneedtochangeadevelopedproduct.

Theusabilitytestsshouldgiveyouananswertothefollowingquestions: • Areyourusersabletodowhattheywanttodo? • Areyourusersabletodoitefficiently? • Howdoyourusersfeelwhiledoingthis?Doyouprovidearichandaddictiveexperience?

If you receive positive answers on each of the questions, you are on the right path to yourmobile success story. If one of the answers to the questions is negative, your design still needssometweaking.

12

About Human Interface Group

Human Interface Group is Europe’s leading usability consultancy. Human Interface Group hasbeen coordinating usability projects for almost 20 years for a wide variety of larger and smallercompaniesandpublicauthorities.

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, anestablished network of independent usability companies who have joined up to provideuserexperienceservicesworldwide,fromNorthAmericatotheFarEast.

Curious about how we can help you understand usability?

Visit www.higroup.com

Mail info@higroup.com

Call +32 (0) 15 40 01 38

Author:HildeVanHorenbeeck

Create your own success story

So,knockyourselfoutcreatingyourownrevolutionarymobileapporwebsiteandgive your business a boost!Becreativeandinnovative,becausethetechnologytodevelopkillermobileappsandsitesisheretoday.

But don’t forget to pack the right user-centered design techniques for your journey. A rich andaddictiveuserexperienceisthedifferencebetweenbeingaone-hitwonderorcreatingsomethingwithstayingpower.

Ifyouneedsomehelp,contactHumanInterfaceGroup.Togetherwecangivetechnologyahumanface.