Upload
madhes-waran
View
216
Download
0
Embed Size (px)
Citation preview
8/6/2019 Designing for Mobile Web
1/51
Designing Interfaces for Mobile Phones
Madheswaran.P
Guidelines & Consideration Web applications
8/6/2019 Designing for Mobile Web
2/51
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
5/51
What & Why Mobile Web?
8/6/2019 Designing for Mobile Web
6/51
4.1 Billion Mobile Subscribers WorldwidemocoNews.net
+ InternetGPRS3G
Wi-Fi
8/6/2019 Designing for Mobile Web
7/51Source: http://www.pewinternet.org
Statistics (US)
32% of all Americans use mobile for Internet
32% (Apr 2009) Vs. 24% (Dec 2007)
8/6/2019 Designing for Mobile Web
8/51
More than 2500 Phone Models
More than 500 different operators
More than 25 browsers
About 14 different screen sizes
8/6/2019 Designing for Mobile Web
9/51
Similarities and Differences
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
12/51
Are these 2500 models are used just as a Phone?
8/6/2019 Designing for Mobile Web
13/51
Mp3 Player
Camera
Videos
Email Games
Chat Clock
Internet
Address Book
Phone
Calendar
Gone are the days of assumed Context of Consumption
8/6/2019 Designing for Mobile Web
14/51
Before Designing
Factors for Consideration
Design Guidelines
Accessibility
Best Practices
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
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?
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
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
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
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
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
If the mobile site design replicates an existing high website the result will range fromsuboptimal to completely unusable
Morten HjerdeUser Experience Manager at Vodafone
8/6/2019 Designing for Mobile Web
19/51
Factors for Consideration
Context
Region & Culture
Fundamentals
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
20/51
8/6/2019 Designing for Mobile Web
21/51
Region & Culture
User behavior
Handset range
Data Pricing
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
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)
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
f f d d l b l
8/6/2019 Designing for Mobile Web
23/51
Source: http://giantant.com/publications/mobile_context_model.pdf
Context of Mobile interaction
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
B f D i i F f C id i D i G id li A ibili
8/6/2019 Designing for Mobile Web
24/51
Constraints
Input Mechanism
Memory
Computational Power
Battery
Screen Size
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
B f D i i F f C id i D i G id li A ibili B P i
8/6/2019 Designing for Mobile Web
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
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
B f D i i F t f C id ti D i G id li A ibilit B t P ti
8/6/2019 Designing for Mobile Web
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
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
B f D ig i g F t f C id ti D ig G id li A ibilit B t P ti
8/6/2019 Designing for Mobile Web
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
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
28/51
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
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
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
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
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
31/51
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
32/51
Subtle spacing
No empty spaces or no spacer images
Proceed in a single direction
Clarity in the design
Layout
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
33/51
Typography
Size matters
Resizing (Server level) &
Right sizing (Page level)
Before Designing Factors for Consideration Design Guidelines Accessibility Best Practices
8/6/2019 Designing for Mobile Web
34/51
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
36/51
Website
http://www.bbc.co.uk/
http://www.bbc.co.uk/mobile/index.html
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
38/51
Case Study 2
New York Times, one of the world s most respectednewspaper
8/6/2019 Designing for Mobile Web
39/51
Website
http://www.nytimes.com/
http://m.nytimes.com
8/6/2019 Designing for Mobile Web
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.
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
42/51
Website
http://www.facebook.com/
http://m.facebook.com
http://touch.facebook.com
8/6/2019 Designing for Mobile Web
43/51
8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
45/51
Website
http://www.ebay.com/
http://m.ebay.com
8/6/2019 Designing for Mobile Web
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/8/6/2019 Designing for Mobile Web
47/51
http://www.flickr.com/http://m.flickr.com/?8/6/2019 Designing for Mobile Web
48/51
Bibliography
http://m.flickr.com/?8/6/2019 Designing for Mobile Web
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
8/6/2019 Designing for Mobile Web
50/51
8/6/2019 Designing for Mobile Web
51/51