Designing for Mobile Web

8/6/2019 Designing for Mobile Web

1/51

Designing Interfaces for Mobile Phones

Madheswaran.P

Guidelines & Consideration Web applications


2/51


3/51

What & Why Mobile Web?

Statistics (US)

Similarities and Differences

Before designingPoints to think before you design

Factors for Consideration

Design Guidelines

Best Practices

Topics

Accessibility

Case Studies


4/51

User experience is not about how a product works on the inside.User experience is about how it works on the outside, where aperson comes into contact with it and has to work with it.

Jesse James Garret

Author , The Elements of User Experience


5/51

What & Why Mobile Web?


6/51

4.1 Billion Mobile Subscribers WorldwidemocoNews.net

+ InternetGPRS3G

Wi-Fi


7/51Source: http://www.pewinternet.org

Statistics (US)

32% of all Americans use mobile for Internet

32% (Apr 2009) Vs. 24% (Dec 2007)


8/51

More than 2500 Phone Models

More than 500 different operators

More than 25 browsers

About 14 different screen sizes


9/51

Similarities and Differences


10/51

Designers know how to work in a rapidly evolving field

Designers understand how to create experiences withintechnical constraints

Designers use similar tools and processes


11/51

A Mobile phone is not a computer

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

Highly variable context and environment

Small screen size and limited text input

UI takes up the entire screen

Difficult to multi-task and easy to get lost

Computer Mobile Phone


12/51

Are these 2500 models are used just as a Phone?


13/51

Mp3 Player

Camera

Videos

Email Games

Chat Clock

Internet

Address Book

Phone

Calendar

Gone are the days of assumed Context of Consumption


14/51

Before Designing


Design Guidelines

Accessibility

Best Practices


15/51

Before Designing Uniquely Mobile

Mobile is a different medium - focus on what it can do well

Focus on needs instead of tactics and solutions

Don t get hung up on heuristics and technology - they change rapidly

Creating uniquely mobile experience

Identify your assumptions upfront

Identify the difference between needs and solutions

Focus on what makes mobile unique

Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices


16/51

Ask yourself

Why in mobile?

Not every website is useful or necessary or makes sense for mobile users.

As always, consider context. If your site or application makes sense on the mobile web,which parts of it belong there. Which content? Which features?

One site or Two?



17/51

Pros

Build once, display many.Avoid redundancyNo synching or version issueswith maintenance

Cons

Requires strategy and technicalsolution for rendering well in eachcontext.

Involves serving up content that maynot fit the mobile context

Involves serving up design elementsthat may not fit the mobile context

You can fine-tune the contentand design for each context

Maintenance challengesFindability issues (or redirectionstrategy needed) for mobile users

O n e

S i t e

T w o

S i t e



18/51

Mobilise, Don't Miniaturise

.treats the mobile environment andtechnology as a subset of the desktopenvironment

Its a repurpose of existing content

.precisely targets mobile user needs,making the best possible use of technology

Content & Context specific

Barbara Ballard

Designer , Little Springs Design


If the mobile site design replicates an existing high website the result will range fromsuboptimal to completely unusable

Morten HjerdeUser Experience Manager at Vodafone


19/51


Context

Region & Culture

Fundamentals



20/51


21/51

Region & Culture

User behavior

Handset range

Data Pricing



22/51

Fundamentals

Screen SizeEx: 128x128px, 128x160px etc

Font FamiliesEx: Series 60 Sans, San serif, Synergybasic, Droid

Font sizes

Physical Interaction

Interaction Techniques

Operating System

Browser SupportEx: WAP2.0 (xHTML not WML)


f f d d l b l


23/51

Source: http://giantant.com/publications/mobile_context_model.pdf

Context of Mobile interaction


B f D i i F f C id i D i G id li A ibili


24/51

Constraints

Input Mechanism

Memory

Computational Power

Battery

Screen Size


B f D i i F f C id i D i G id li A ibili B P i


25/51

Design Guidelines

Design for Simplicity

Relate visual precedence to task importance

Reduce functionality

Keep navigation narrow and shallow

Avoid extraneous information

Useful Feedback Identify critical feedback

Ensure quick system response


B f D i i F t f C id ti D i G id li A ibilit B t P ti


26/51

Design with Small Screen

Minimize user input

Minimize vertical scrolling and avoid horizontalscrolling

Use hyperlinks effectively

Prioritize the information

Maintain existing standard

Use existing standards

Use real world metaphors


B f D ig i g F t f C id ti D ig G id li A ibilit B t P ti


27/51

Accessibility

Native UI library

Color and Contrast

Use of Color

Color Contrast

Use Semantic Colors

Inherit Global settings from OS

Important for Map Settings

Dont conflict with user defined settings



28/51



29/51

Progressive Disclosure

Grouping and Chunking

Organize info based on meaning, type etc

Limit the option to 3 - 5

Keyboard Access

Use keyboard shortcuts

Inform the user of the number of steps in a task

Consistency

Navigation, Presentation, Interaction method




30/51

Best Practices

Navigation

Clarity in linking

Avoid linking to non existing page

Make access easy

Minimize navigation bars on top

Main content first

Browsing time should be less

Shallow and wide

Place basic browsing controls on the page



31/51



32/51

Subtle spacing

No empty spaces or no spacer images

Proceed in a single direction

Clarity in the design

Layout




33/51

Typography

Size matters

Resizing (Server level) &

Right sizing (Page level)



34/51


35/51

Case Study 1

The British Broadcasting Corporation , usually referred to byits abbreviation as the " BBC", is the longest established andlargest broadcaster in the world


36/51

Website

http://www.bbc.co.uk/

http://www.bbc.co.uk/mobile/index.html


37/51

The BBC mobile website brings the information to themobile user in a straightforward and efficient way.

Contents are formatted to allow users to browse headlineseasily and drill down to relevant information.

The amount of graphics can be customized by the user.

Primary navigation is through links rather than a menu bar


38/51

Case Study 2

New York Times, one of the world s most respectednewspaper


39/51

Website

http://www.nytimes.com/

http://m.nytimes.com


40/51

The classic NYT look is maintained through thetypography and color scheme, while adapting the contentto mobile.

Online services such as stocks, weather receive specialattentions since the information is formatted for maximumefficiency.

Headlines are presented with the using the real world

language.


41/51

Case Study 3

Facebook is a social networking website that is operated andprivately owned by Facebook, Inc. Users can add friends andsend them messages, and update their personal profiles to

notify friends about themselves

W b i


42/51

Website

http://www.facebook.com/

http://m.facebook.com

http://touch.facebook.com


43/51


44/51

Case Study 4

eBay Inc. is an American Internet company that manageseBay.com, an online auction and shopping website in whichpeople and businesses buy and sell a broad variety of goods

and services worldwide.

W b it


45/51

Website

http://www.ebay.com/

http://m.ebay.com


46/51

A strong, clear brand identity linked to a simplified interfacefacilitates easy service usage and assures the users of consistent interaction with the brand.

Clear and simple layouts and links facilitates rapid bidding.

The main content is textual, efficient scaling of images informsthe users of the auction details without cumbersomedownloads.

Personalized bidding information is consistently accessiblewithin the navigation.

Non essential links are placed at the bottom.
http://www.flickr.com/


47/51
http://www.flickr.com/http://m.flickr.com/?


48/51

Bibliography
http://m.flickr.com/?


49/51

http://www.ecis2009.it/papers/ecis2009-0515.pdfhttp://dpl.kaist.ac.kr/web_wiki/images/9/99/Kimj2005.pdfhttp://www.websiteoptimization.com/secrets/seo/1-13-honeycomb-morville.jpghttp://ilmfinder.com/wp-content/uploads/2008/05/searching-man.jpghttp://registrarism.files.wordpress.com/2009/06/globe-europe.jpghttp://media.sacbee.com/static/weblogs/real_estate/abstract-party-1.jpghttp://www.devlounge.net/wp-content/uploads/2009/10/cromulentdesign-disoriented.jpghttp://www.rso.cornell.edu/hellenic/images/stories/computer.jpghttp://www.pmthink.com/TransformationProject01.jpghttp://customize.org/download/wallpapers/48582/43074/iCustom-1600x1200.jpghttp://images.allmoviephoto.com/2005_The_Hitchhiker%27s_Guide_to_the_Galaxy/2005_the_hitchhickers_guide_to_the_galaxy_wallpaper_001.jpghttp://graphics8.nytimes.com/images/2008/06/01/travel/01places-newest-600.jpghttp://akshaya.files.wordpress.com/2009/01/business-people.jpghttp://www.eurovision.tv/save-files/img/upload/news/2009/Finland/Profile/WaldosPeople-01B-RESIZE-s925-s450-fit.jpghttp://freshome.com/wp-content/uploads/2008/02/bedroom-design.jpg

http://www.digital-photo.com.au/gallery/d/24522-3/Young-couple-kissing_MG_2871.jpghttp://www.dawsonyorodesign.com/InformationDesignWebs/infoDesign2/images/240px-Religious_symbols.svg.jpghttp://msnbcmedia3.msn.com/j/msnbc/Components/Photo_StoryLevel/080225/080225-church-hmed4p.h2.jpghttp://static.commentcamarche.net/en.kioskea.net/faq/images/0-xyyXo3rz-langauge-s-.pnghttp://images.china.cn/images1/200802/421079.jpghttp://sender11.typepad.com/sender11/2008/04/mobile-screen-s.htmlhttp://appleiphonefactory.com/wp-content/uploads/2009/01/iphone-stylus1.jpghttp://www.dmsourcing.com/images/products/touch-screen_1.jpghttp://1.bp.blogspot.com/_1zO-77u-TMo/RfPXdl1ZKvI/AAAAAAAAAXk/_VZKKNjtSHI/s320/samsung_sch_v960_zoom.jpghttp://1.bp.blogspot.com/_50rv3AgzGA8/RsXkoeTsvvI/AAAAAAAAAEI/1pSGv32U-7I/s400/Sony_Ericsson_P1i_smart_phone_Side.jpghttp://v4.mypdacafe.com/news/2009/05/13/2_1.jpghttp://tech2.in.com/media/images/2007/Oct/img_28111_symbian_os.jpghttp://blog.taragana.com/wp-content/uploads/2009/06/java.jpghttp://www.topnews.in/files/Android-7255.pnghttp://www.saveafewbob.ie/wp-content/uploads/2009/05/twohands.jpghttp://fotosa.ru/stock_photo/Corbis_RF/p_2718115.jpghttp://flickr.com/photos/moriza/126238642/ http://newmoonbirth.files.wordpress.com/2009/05/thank-you.jpghttp://www.pewinternet.org/Reports/2009/12-Wireless-Internet-Use.aspxhttp://www.lendingcentral.com/wp-content/uploads/bigstockphoto_making_statistics_1831264.jpghttp://www.iheni.com/universal-access-on-mobile-accessibility-20/

http://www.allaboutsymbian.com/features/item/Its_An_M_Web_The_Top_Ten_Mobile_Web_Sites.php

Bibliography


50/51


51/51

Designing for Mobile Web

Documents

Transcript of Designing for Mobile Web