MOBILE INTERACTION DESIGN Dr. Barbara Rita Barricelli

PhD Course, 21-22-23 January 2020

OVERVIEW

Unit 1

Interaction design

Unit 2

Mobile Interaction Design

Unit 3

User research

Unit 4

Prototyping

Unit 5

iOS Human Interface Guidelines,

Google Material Design

Unit 6

Hands-on activity

UNIT 2 Mobile Interaction Design

WHAT DOES MOBILE MEAN?

Smartphones

Tablets

eReaders

Portable game systems

Printers

Scanners

Weareable devices

Industrial automation

Portable surveying, measuring and metering equipment

EVOLUTION OF MOBILE TECHNOLOGY

Voice

Paging and text messages

Pervasive network connectivity

General computingdevices

MAIN CHARACTERISTICS

Small (enough to be carried around)

Portable (battery-powered)

Connected (wirelessly)

Interactive (more than just a few options)

Contextual aware (sensors)

PRINCIPLES OF MOBILE DESIGN

Respect user-entered data

Realize that mobiles are personal

Realize that mobiles must work in all contexts

User your sensors and use your smarts

Realize that user tasks usually take precedence

Ensure consistency

RESPECT USER-ENTERED DATA

Do whatever it takes to preserve user data:

Saving as the user types so auto-complete can bring lost input back

Do not clear forms on error

Context must be always take into consideration:

Users slip

Have to deal with a new phone

Are borrowing someone else’s phone

Someone jugs their arm

REALIZE THAT MOBILES ARE PERSONAL

Mobile can be presumed to be «one device for one person»

No one wants to have to regularly tell their device the same information over and over (name, address, …)

MOBILES MUST WORK IN ALL CONTEXTS

Most devices are too bright at night

Or the brightness of the screen is too low when a barcode needs to be scanned in a shop

You can ovverride the brightness with your app to assure efficacy and efficience in any context.

USER YOUR SENSORS AND YOUR SMARTS

Whenever possible, perform an action for th user based on sensors and user data

Why should you have to silence your phone for a meeting, when the phone knowswhere you physically are and knows from your calendar that you have a meeting in that room in that moment?

USER TASKS USUALLY TAKE PRECEDENCE

If the user initiates a task or is in the middle of one, do not interrupt them.

Do not change the focus

And never cancel the ongoing operation to take the user to another page (losingtheir information)

ENSURE CONSISTENCY

Your app should follow what the other standard apps do and what the OS does

Changing the paradigm generally results in more problems than solutions

DESIGN PATTERNS

Concept developed in 1977 by the architect Christopher Alexander.

A formal way of documenting a solution to a common design problem. Based on the concept of reusing and reapplyingknown best cases in design.

“Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice”.

MOBILE INTERACTION DESIGN PATTERNS

Often confused with graphical templates (a template is a model, ready to be usedas it is or adapted)

Mobile interaction design patterns evolve in time, to address the continuous changesin technology

PATTERNS ORGANIZATION

Navigation

Forms

Tables

Search, sort and filter

Tools

Charts

Social patterns

Feedback and affordance

Help

NAVIGATION

Primary: allows to navigating from one primary category to another, as with the top-level menus of a desktop application

Secondary: moving about within a selected module

PRIMARY NAVIGATION

Persistent: as soon as you open an app with persistent navigation, it is immediately clear what the primary navigation options are.

Transient: must be explicitly revealed with a tap or gesture. These patterns arise from the constraints of smartphone screen sizes.

PRIMARY NAVIGATION PATTERNS

Springboard

List menu

Dashboard

Gallery

Tab menu

Side drawer

Toggle menu

PERSISTENT

TRANSIENT

SPRINGBOARD (AKA LAUNCHPAD)

LIST MENU

DASHBOARD

GALLERY

TAB MENU

SIDE DRAWER

TOGGLE MENU

SECONDARY NAVIGATION PATTERNS

Page swiping

Expand/collapse panel (Accordion)

PAGE SWIPING

EXPAND/COLLAPSE PANEL (ACCORDION)

FORMS

Sign In

Registration

Checkout

Calculator

Search form

Multi-step form

SIGN IN

REGISTRATION

CHECKOUT

CALCULATOR

SEARCH FORM

MULTI-STEP FORM

TABLES

Basic table

Headerless table

Overview plus data

Grouped rows

Tables with visual indicators

BASIC TABLE

HEADERLESS TABLE

OVERVIEW PLUS DATA

GROUPED ROWS

TABLE WITH VISUAL INDICATORS

SEARCH, SORT AND FILTER

Implicit search

Explicit search

Auto-complete

Scoped search

Dynamic search

Search form

Search results

Onscreen sort

Filter form

Filter drawer

Gesture-based filter

IMPLICIT SEARCH

EXPLICIT SEARCH

AUTO-COMPLETE

SCOPED SEARCH

DYNAMIC SEARCH

SEARCH FORM

SEARCH RESULTS

ONSCREEN SORT

FILTER FORM

FILTER DRAWER

GESTURE-BASED FILTER

TOOLS

Toolbar

Toolbox

Call to action button

Inline actions

Multi-state buttons

Contextual tools

Bulk actions

Lock screen controls

TOOLBAR

TOOLBOX

CALL TO ACTION BUTTON

INLINE ACTIONS

MULTI-STATE BUTTONS

CONTEXTUAL TOOLS

BULK ACTIONS

LOCK SCREEN CONTROLS

CHARTS

Chart with filters

Interactive timeline

Drill down

Overview plus data

Interactive preview

Dashboard

Zoom

Integrated legend

CHART WITH FILTERS

INTERACTIVE TIMELINE

DRILL DOWN

OVERVIEW PLUS DATA

INTERACTIVE PREVIEW

DASHBOARD

ZOOM

INTEGRATED LEGEND

SOCIAL PATTERNS

Social registration

Connecting

Following

Profiles

Groups

Gamification

SOCIAL REGISTRATION

CONNECTING

FOLLOWING

PROFILES

GROUPS

GAMIFICATION

FEEDBACK AND AFFORDANCE

Error messages

Confirmation

System status

Tap

Swipe

Drag

ERROR MESSAGES

CONFIRMATION

SYSTEM STATUS

TAP

SWIPE

DRAG

HELP

How-tos

User guide/help system

FAQs

Feature tours

Tutorials

Contextual help

HOW-TOS

USER GUIDE/HELP SYSTEM

FAQS

FEATURE TOURS

TUTORIALS

CONTEXTUAL HELP

REFERENCES

Hoober, S. (2012) Designing Mobile Interfaces. O’Reilly

Neil, T. (2014) Mobile Design Pattern Gallery. O’Reilly

https://www.flickr.com/photos/mobiledesignpatterngallery/sets/

https://www.flickr.com/photos/mobiledesignpatterngallery/sets/