Dana McKay and Guest Lecturer
RMIT University acknowledges the people of
the Woi wurrung and Boon wurrung
Copyright By PowCoder代写 加微信 powcoder
language groups of the eastern Kulin Nation on whose unceded lands we conduct the business of the University.
RMIT University respectfully acknowledges their Ancestors and Elders, past and present. RMIT also acknowledges the Traditional Custodians
and their Ancestors of the lands and waters across Australia where we conduct our business.
Ngarara Place
RMIT Classification: Trusted
George is a pioneer in mobile interaction design, having developed early mobile menu structures. In the late 90s and early 00s George had research collaborations with Nokia, and he has ongoing partnerships with Apple today.
George is an Associate Professor at the University of Melbourne and director of the Melbourne iSchool
Quiz open now:
Interface Hall of Fame or Shame?
Start to submit these to my email with the subject “Interface Hall of Fame or Shame” and I’ll pick one for each lecture to discuss.
RMIT Classification: Trusted
Interface Hall of Fame or Shame?
RMIT Classification: Trusted
Learning objectives
1) To have identified the important and unique challenges in designing for the mobile interface.
2) To be able to recall patterns used in the mobile interface.
3) To understand the different user behavior in the mobile environment.
RMIT Classification: Trusted
History of User Interfaces
• Command line • Early graphics
• Early GUIs
• APIs for windows etc
• Emergent patterns
• Early mobile phones • Web emerges
• Web patterns
• Early smartphones
• Touch interfaces emerge
Great resource: https://youtu.be/U1Oy4X5Ni8Y
RMIT Classification: Trusted
Early pocket touchscreen
Who got there first: Microsoft or Apple? Why has one been more successful?
RMIT Classification: Trusted
Mobile touchscreen on pocket size devices
, Introduction to HCI, University of Maryland
RMIT Classification: Trusted
Mobile touchscreen on pocket size devices
, Introduction to HCI, University of Maryland
RMIT Classification: Trusted
Pocket mobile touchscreens
Win CE 2.0 Pocket PC Pocket PC Win Mobile Win Mobile 5 Win Mobile 6 2000 2002 2003
, Introduction to HCI, University of Maryland
Iphone 1, 2007
RMIT Classi
ication: Trusted
, Introduction to HCI, University of Maryland
RMIT Classification: Trusted
Smartphone evolution
16 years ago 10 years ago 7 years ago
RMIT Classification: Trusted
What drove the changes?
Technology
Improvements and developments in high tech manufacturing But what about usability?
Section Homework: Find an old phone and learn how to use it.
RMIT Classification: Trusted
Context and mobile
Context: “any information that can be used to characterize the situation of an entity” [Dey and Abowd 1999].
The most important types of context are identity, location, time, and activity [Moran and Dourish 2001].
Context-aware applications observe the “who’s, where’s, when’s, and what’s” of entities [Dey and Abowd 1999].
Example: Location-aware services in Google Maps, Yelp, etc
Benefits of context aware
RMIT Classification: Trusted
Context Types
Automatic light on/off switcher
Room activity
Convenience
Smoke alarm
Environmental (air quality)
Calendar Reminders
Time (and recently location)
Memory aid
Traffic live updates
Convenience, efficiency
NFC (Near Field comms)
Object / user identity
Convenience, efficiency
Stand up reminder
User activity
RMIT Classification: Trusted
Mobile design advantages
“INSTANT ON” GPS CAMERA INTEGRATED EASY INSTALL OTHERS? (SHARE) OF APPS
RMIT Classification: Trusted
Mobile design constraints
Limited pixel real estate
Variable screen widths
Touch screens
Text insertion difficulty
Physical environments
Usage behaviour
Limited real estate
RMIT Classification: Trusted
Pixels worth more each
Cannot clutter/cram
Choose carefully
RMIT Classification: Trusted
Variable screen widths.
Android phones have different form factors Need consistent style/appearance
RMIT Classification: Trusted
Touch Screens
•Fat Thumbs and Fingers effect.
•Small design elements unusable (e.g. radio buttons) •Multitouch gestures (e.g. pinch) offer new interactions
RMIT Classification: Trusted
Fat Fingers problem – example
Google introduces a new mobile ad to combat fat fingers
http://bits.blogs.nytimes.com/2012/ 12/14/google-introduces-a-new- mobile-ad-to-combat-fat- fingers/?_php=true&_type=blogs&_ r=1
What else does this improve?
RMIT Classification: Trusted
Input modes
• Voice increasingly reliable • Voice not private
• Typing difficult/inaccurate
RMIT Classification: Trusted
Thumbzones for Natural Touch
https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
RMIT Classification: Trusted
RMIT Classification: Trusted
Movements during swipe
RMIT Classification: Trusted
Physical Environments
Users interact ‘out and about’
Limited attention span and focus
Device generates interruptions (e.g. calls)
RMIT Classification: Trusted
Attention span study
• http://www.telegraph.co.uk/scien ce/2016/03/12/humans-have- shorter-attention-span-than- goldfish-thanks-to-smart/
RMIT Classification: Trusted
Usage Behavior
Devices and interactions must tolerate interruption Jumping between apps (e.g. to take a photo) is normal Interruptions as often as every 90 seconds
RMIT Classification: Trusted
Approaching Mobile Design
• What do mobile users actually need?
• Strip down the site or app down to its essence
• Use the devices’ specialized hardware to help, not to hinder. • Linearize your content (Vertical Stacking).
• Optimize the most common interaction sequences.
Mobile patterns
RMIT Classification: Trusted
One-window drilldown
RMIT Classification: Trusted
Hub and Spoke
Example Patterns
Vertical Stack
Touch Tools
Bottom Navigation Thumbnail and text List Infinite scroll
RMIT Classification: Trusted
RMIT Classification: Trusted
Vertical Stack
• Order the mobile pages’ content in a vertical column with minimal use of side elements.
• Allows for narrow and variable width screens. • Scrolling no longer a UX fail
• Preferable to long download delays.
Vertical Stack
RMIT Classification: Trusted
RMIT Classification: Trusted
•User swipes side to side at top level
•Conceptually parallel content (e.g. weather in different
•Dots at bottom of screen indicate swipe possibilities •Do not use for large numbers of parallel pages.
RMIT Classification: Trusted
RMIT Classification: Trusted
Touch Tools
• Tools appear only in response to touch • Appear as overlay
• Example: the iOS video player only shows content when the user taps the screen and fades after 3-5 seconds of non use.
• Why is this?
Touch Tools
RMIT Classification: Trusted
Stanza Reader Touch Tools, in J. Tidwell, Designing Interfaces, Figure 10-9, p.456.
RMIT Classification: Trusted
Bottom Navigation
• Navigation at bottom of the page • Useful for low priority global nav • Horizontally aligned icons
RMIT Classification: Trusted
Bottom Navigation
RMIT Classification: Trusted
Sidebar navigation
Collapsible sidebar
Commonly indicated by ‘hamburger’
Frees up screen realestate (in comparison to bottom nav) Usually top left, but Google somewhere else—where?
RMIT Classification: Trusted
Sidebar navigation
RMIT Classification: Trusted
Discussion—5 min
• Advantages of sidebar and bottom nav (think heuristics!) • When would you use each?
• When would you use both?
RMIT Classification: Trusted
Thumbnail and Text List
Present a selectable list, with each item containing a thumbnail image, text and possibly smaller text.
Used for lists of articles, blog entries, apps, videos.
Adding colors properly can improve visual differentiation.
Brighter colors can be used for mobile screens than for large desktop screens. Why is this?
RMIT Classification: Trusted
Thumbnail and Text List
iPhone app store, in J. Tidwell, Designing Interfaces, Figure 10-13, p.459.
RMIT Classification: Trusted
List buttons.
• Interactive items should be tappable anywhere in the item cell.
• The entire list item is a button
RMIT Classification: Trusted
Infinite list or scroll
• Button at the bottom of the screen to get more items
• Saves waiting time.
• Combats limited bandwidth and disconnections in the mobile environment.
• Maintains user context by appending to the current page.
RMIT Classification: Trusted
Pull down action
• Dragging down is ergonomic and intuitive • Used for e.g. refresh
• Much better than refresh button—why?
RMIT Classification: Trusted
Pull down action
Clearing text
• Clear a text field with a one button press. • Erasing strings is slow letter by letter.
• Have an X or Clear button in the text field.
RMIT Classification: Trusted
RMIT Classification: Trusted
Mobile web
• Not just ‘downsized’ desktop
• Native standards, customs, conventions
RMIT Classification: Trusted
Which is the mobile version of Wikipedia?
Mobile Design and Development
RMIT Classification: Trusted
Design considerations
• Device agnostic vs device specific? https://www.youtube.com/watch?v=k471NjCtSr8 (watch up to 3:00 before the ads)
• Task-focused experience across multiple platforms?
• Native, web, or hybrid apps? https://www.youtube.com/watch?v=Ns-JS4amlTc
RMIT Classification: Trusted
Operating systems have “house styles”
• Android – Material design
• http://www.google.com/design/spec/material-design
• Android – Navigation patterns
• http://www.google.com/design/spec/patterns/navigati
Mobile Design Testing
RMIT Classification: Trusted
User testing of mobile apps
• App development highly agile
• Early feedback better (as always), think prototypes
• continues through to the App Store
• Feedback should be fast
• Step-by-step guide: http://usabilitygeek.com/usability-testing-mobile- applications/
RMIT Classification: Trusted
Mobile device usability testing
• https://www.mrtappy.com/
Mobile research
RMIT Classification: Trusted
This paper receives ’s best paper award from IEEE PerCom 2018, Athens
RMIT University©2016 CS&IT 62
Mobile research
RMIT Classification: Trusted
RMIT University©2016 CS&IT
RMIT Classification: Trusted
Discussion
Go to theage.com.au on your laptop or desktop.
Next, open up the same website on your phone.
RMIT Classification: Trusted
Identify the differences between desktop and mobile form factor.
Evaluate how these changes result in better UX.
15 mins discussion then report back
• Mobile not just ‘small desktop’
• Conventions and patterns emerging
• Testing highly agile
Quiz code:
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com