THE NERDERY

WE HELP OUR PARTNERS GET BIG IDEAS OUT OF THEIR HEADS AND ONTO THEIR CLIENTS’ WEBSITES

HTTP://WWW.NERDERY.COMTWITTER: @THE_NERDERY

670,792 3876HOURS WORKED SINCE 2003 PROJECTS DOGS IN OUR OFFICE BIKE COMMUTERS

HOURS WORKED, LAST 12 MONTHS

PEOPLE WHO WORK AT THE NERDERY

AVERAGE JANUARY TEMPERATURE

TWO HUNDRED FIVE

EIGHT 6

FOURº

HOW TO PARTICIPATE

Using the questions panels in the GoToMeeting app

On Twitter @The_Nerdery

Send us an email at primers@nerdery.com

MOBILE UXI N T E R A C T I V E P R I M E R S E R I E S

JACOB USER EXPERIENCE DESIGNER

JONSENIOR DEVELOPER

WHAT WE WILL COVER

1. The Mobile Landscape

2. Types of Mobile Apps

3. Mobile UX Process

4. Designing Mobile Apps

5. Technology Limitations

1. THE MOBILE LANDSCAPE

Source: http://nrdry.com/3X

MOBILE GROWTH

MOBILE FACTS

Source: http://nrdry.com/3X

MOBILE USAGE

MOBILE MARKETING

Source: http://nrdry.com/3X

MOBILE FINANCE

2. TYPES OF MOBILE APPS

Serious Tools

Fun Tools

Fun Games

Serious Entertainment

Source: http://nrdry.com/3X

TYPES OF MOBILE APPS

UX DESIGN FOR MOBILE UX Designers know how to work in a rapidly evolving field.

UX Designers understand how to create experiences with technical constraints.

It’s the UX Designers job to align User Needs and Business Objectives into the final application. Us

er N

eeds

Business

Application

3. MOBILE UX PROCESS

MOBILE UX PROCESS

1. User Requirements Analysis

2. Conceptual Design

3. Design and Implementation

4. Usability Evaluation

5. Launch and Maintenance

4. DESIGNING FOR MOBILE

Simplicity

User-focused Design

Understanding Devices

Standard UI Conventions

Technology Limitations

DESIGNING MOBILE APPSTHINGS TO KEEP IN MIND

SIMPLICITY

Reduce Functionality

Relate Visual Precedence to Task Importance

Keep Navigation Narrow and Shallow

Avoid Extraneous Information on Each Screen

Reduce or Remove Preferences

Use Progressive Disclosure

SIMPLICITY EQUATES TO USABILITY

Source: http://nrdry.com/3N

USER-FOCUSED DESIGN

Why do they use your app?

What features are they using?

What features are crucial for them on mobile?

What are some sources of frustration?

What devices do they use to access the mobile web?

UNDERSTANDING DEVICES

CHOOSING A TARGET OS

SELECTING TARGET DEVICES M O S T P O P U L A R P H O N E S O N T H E M A R K E T

1. 2. 3. 4. 5.

Apple iPhone 4 Motorola Atrix HTC Thunderbolt T-Mobile myTouch 4G Samsung Galaxy S

SELECTING TARGET DEVICES MOST POPULAR TABLETS ON THE MARKET

1. 2. 3.

Apple iPad (82%) Dell Streak (3%)Motorola Xoom (4%)

EXISTING UI CONVENTIONS Custom UI Native UI VS.

EXERCISE UI COMPARISON

UI COMPARISON FACEBOOK - IPHONE

UI COMPARISON FACEBOOK - ANDROID

UI COMPARISON FACEBOOK - WINDOWS MOBILE

UI COMPARISON FACEBOOK - BLACKBERRY

UI COMPARISON TWITTER - IPHONE

UI COMPARISON TWITTER - ANDROID

UI COMPARISON TWITTER - WINDOWS

UI COMPARISON TWITTER - BLACKBERRY

UI COMPARISON YELP - IPHONE

UI COMPARISON YELP - ANDROID

UI COMPARISON YELP - WINDOWS

UI COMPARISON YELP - BLACKBERRY

UI COMPARISON

CAN YOU PICK OUT WHICH APP GROUPS BELONG TO WHAT OS?

UI COMPARISON

CAN YOU PICK OUT WHICH APP GROUPS BELONG TO WHAT OS?

IPHONE WINDOWS ANDROID BLACKBERRY

UI GUIDELINES

iOS Human Interface Guidelines

UI Guidelines for BlackBerry

Android User Interface Guidelines

Motorola’s Best Practices for UI

Nokia Design & User Experience Library

Bada Application UI Guide

Sony Ericsson UI Rulebook

UI Guidelines for Windows Mobile

UI DESIGN OS GUI TEMPLATES

5. TECHNOLOGY LIMITATIONS

TECHNOLOGY LIMITATIONS Web App Native AppVS.

NATIVE APP

Better Experience

Background Applications

Device Capabilities

Findability

Offline Mode

Games

IN FAVOR OF NATIVE APPLICATIONS

WEB APP

Cross-platform support

Central updates

Accessibility

Development Effort

Open Mobile Web

IN FAVOR OF WEB APPLICATIONS

WEB APPS VS. NATIVE APPSINTERACTIVE PRIMER

http://nrdry.com/8

QUESTIONS?Using the questions panels in the GoToMeeting app

On Twitter @The_Nerdery

Send us an email at primers@nerdery.com

More answers online at http://nerdery.com