Jeff Offutt http://www.cs.gmu.edu/~

Jeff Offutt http://www.cs.gmu.edu/~ - PPT

offutt. /. SWE 632. User Interface Design and Development. Cooper Ed4, . Ch. 19. Cooper Part III. Interaction Details. Designing for Mobile Devices. Pre-2007 Mobile Devices. Keyboards. optimized for 4-year old fingers. ID: 737905

By celsa-spraggs
Watch All docs

Likes : 1
Views : 7

Download this presentation

Click below link (As may be) to get this presentation.

Jeff Offutt http://www.cs.gmu.edu/~

Download Note - The PPT/PDF document "Jeff Offutt http://www.cs.gmu.edu/~" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentations text content in Jeff Offutt http://www.cs.gmu.edu/~

Jeff Offutthttp://www.cs.gmu.edu/~offutt/SWE 632User Interface Design and DevelopmentCooper Ed4, Ch 19
Cooper Part III
Interaction Details
Designing for Mobile Devices
Pre-2007 Mobile DevicesKeyboards optimized for 4-year old fingersTouchscreens that barely worked and wore out quicklyPoorly lit screens
that were only visible in perfect lighting
A
stylus was required to use the screens effectivelyPoorly lit screensUIs that tried to mimic large-screen UIs
1 November 2016
© Jeff Offutt
2
2007—The iPhoneScreens visible in all kinds of lightTouch screens that could accommodate adult-sized and even fat-person fingersAn
OS with controls
that could be used effectively
Gesture-based idiomsPinching, swiping, …Sensors that knew things about the environmentOrientation, location, lighting, and movements
1 November 2016
© Jeff Offutt
3
iPhone brilliantly combined advances in hardware
with lots of research in software engineering and usability
4
The iPad did the same thing for tablet computers, completely changing the way they were
engineered
programmed
and
used
Users (and designers) are still redefining how we use our various devices
Pocket computers
Tablets
Laptops
Desktops
5
Anatomy of a Mobile App
Mobile Navigation, Content, and Control Idioms
Gestures, Integration, and Other Devices
Mobile Application PostureThey usually use the full screen (as opposed to desktop transient software)But we use most mobile software in a transient fashion
Brief
,
intermittent, and task-focusedControls on mobile devices must be small enough to fit on small screens, but large enough to be used by fingers1 November 2016
© Jeff Offutt
6
Games are usually sovereign applications
Most mobile apps have transient posture
Types of Mobile DevicesHandhelds (pocket computers) : phones, music playersTall narrow screens (16:9 … 4 to 6 inches diagonally)Often used in portrait orientationTablets
: iPad, kindle, …
More rectangular (4:3 … 9 to 10 inches diagonally)
Mix of portrait and landscapeMini-tablets4:3 or 16:9 … 7 to 8 inches diagonallyStill not clear where these will fit in
1 November 2016
© Jeff Offutt
7
These categories and the dimensions are still evolving
Handheld Screen HandlingMost mobile devices do not have window managementOne full-screen application at a timeStacksA vertical list or a grid of pieces of informationiPhone: Main screen, music, notes
Most scrolling is vertical
Screen carousels
Users navigate through screens by swiping horizontallyWeather, photosThe carousel sometimes moves in a circleOrientationHandheld devices know if they are in portrait or landscape mode
Clever apps detect and adapt to orientation
1 November 2016
© Jeff Offutt
8
Tablet Screen HandlingA lot more screen space is availableStacks are commonSometimes including tab,
navigation
, and
action barsSometimes additional supporting panes (email & dropbox index pane on the iPad)Pop-up control panelsiPad Maps Directions and Share
Tablet apps must re-orient more aggressively, including controls and navigationSafari on iPad
Note how 2048 (game) fails
1 November 2016
© Jeff Offutt
9
0
Tablet Screen HandlingTablets need to function differently from desktops for many appsMedia browsing, purchasing, browsingSome apps can look more like desktop appsTool bars, panes, pop-up panels
Audio and video production apps
C
ontrols must be adapted toSmaller screenTouch screen interaction (no mouse, clumsy keyboard)Drag and drop is harder with a touch screen
10
1
11
Anatomy of a Mobile App
Mobile Navigation, Content, and Control Idioms
Gestures, Integration, and Other Devices
2
Browsing ControlsBrowsing is the most common, and therefore most important activity Viewing content is easyEntering data is painful, entering content is almost impossible
Lists
are the most common pattern for organizing content
Grids allow icons and content to be organizedHome screen on the iPhoneContent carousels offer horizontal scrollingSwimlanes
mix stacks, grids and carousels, allowing vertical and
horizontal scrollingNetflix on the iPad does this well ( should use circular scrolling )
Card
: A discrete chunk of content that has its own controls and
content
Linked-in
and
facebook
1 November 2016
© Jeff Offutt
12
3
Navigation and Tool BarsBars contain much of the navigation functions for mobile appsThey have become smaller over timeThey often disappear after a few seconds or when the main content screen is tapped (Goodreader, photos)Tab bars
provide different view of the same content
Facebook controls at the bottom of the iPhone
More … control navigates to an additional list of functionsTab carousels offers tab controls that can be swiped to access more controls
1 November 2016
© Jeff Offutt
13
4
Navigation and Tool BarsNav bars and action bars use swiping or back buttons to navigate lists and gridsTool bars and palettes contain buttons that run functions on the current contentCan be bottom, side, or top of the screen
Tool carousels
are tool bars that can rotate in a carousel manner
14
Do not
use menu bars in a mobile app
(
menus are too hard to navigate with fingers
)
5
DrawersDrawers give access to a vertical list of navigation controlsThey hide on the side of the deviceFacebook has a right-hand drawer on the iPhone to access “Nearby Friends”
Lots of
variations
15
Limit the number of animated screen transitions
6
Searching, Sorting, & FilteringUsers search to find content to browse, making it one of the most important features in a mobile appImplicit sorting is when apps track users’ behaviors and offer suggestionsNetflix bases their entire mobile app on this principleEntering
search queries
Voice search
is great with simple wordsWe love and hate auto-complete … http://www.damnyouautocorrect.com/
Tap-ahead got much more aggressive with ios
8Check the iPhone’s Messages appRecent searches is one of Google’s favorite tricks
Auto-suggest
offers several choices based on what we’ve typed
1 November 2016
© Jeff Offutt
16
7
17
Anatomy of a Mobile App
Mobile Navigation, Content, and Control Idioms
Gestures, Integration, and Other Devices
8
Multi-Touch GesturesTouch screens allowed and forced designers to invent numerous new ways to control applicationsReplace mice and keyboards actionsGestures
Tap
to select, activate, or toggle
Tap and hold is hard to use and hard to findDrag to scrollDrag to move … accidental release is easy and common
Drag to control knobs, switches, sliders, etc.Swipe is slightly different from dragging, but not much
Pinching is used to shrink or zoom
Rotate
with a thumb and forefinger is clever but awkward
Multifinger
swipes
add flexibility, but most users don’t know about them
1 November 2016
© Jeff Offutt
18
9
Inter-App IntegrationAllowing apps to communicate can dramatically increase their behaviorsIt’s very hard for developers to use communicationConsider the iPhone’s phone, contacts, calendar, messaging, memo, and reminders
They play together, but
not very effectively
Users usually can’t “rewire” connectionsWe can install google maps, but can’t tell Safari to use itThis is a huge source of security and privacy attacksFunctionality in location-aware apps can be sniped
by apps we choose not to be location-aware
1 November 2016
© Jeff Offutt
19
0
Other DevicesDevice-embedded interfaces are UIs that are embedded or attached to non-computing devicesTVs, home appliances, car dashboards, cameras, …General principlesDon’t think of the device as a computer
Design the UI design
while designing the hardware
, not afterConsider the context of how the device will be usedAvoid modal behaviorDo as little as possible—use the KISS principle
Carefully balance navigation and content densityMake data input as
simple as possible
1 November 2016
© Jeff Offutt
20
1
Summary Mobile Devices
The same general principles from previous chapters apply
This
changes a lot of specifics
Two major differences:
Outputs are to a smaller screen
Inputs are
through
a touch screen and (increasingly) a microphone