mobile ux - a nerdery interactive primer
DESCRIPTION
Apply for our User Experience Designer or Mobile Developer jobs at The Nerdery: http://nerdery.com/jobsTRANSCRIPT
![Page 1: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/1.jpg)
![Page 2: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/2.jpg)
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º
![Page 3: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/3.jpg)
HOW TO PARTICIPATE
Using the questions panels in the GoToMeeting app
On Twitter @The_Nerdery
Send us an email at [email protected]
![Page 4: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/4.jpg)
MOBILE UXI N T E R A C T I V E P R I M E R S E R I E S
![Page 5: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/5.jpg)
JACOB USER EXPERIENCE DESIGNER
![Page 6: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/6.jpg)
JONSENIOR DEVELOPER
![Page 7: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/7.jpg)
WHAT WE WILL COVER
1. The Mobile Landscape
2. Types of Mobile Apps
3. Mobile UX Process
4. Designing Mobile Apps
5. Technology Limitations
![Page 8: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/8.jpg)
1. THE MOBILE LANDSCAPE
![Page 9: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/9.jpg)
Source: http://nrdry.com/3X
MOBILE GROWTH
![Page 10: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/10.jpg)
MOBILE FACTS
Source: http://nrdry.com/3X
MOBILE USAGE
![Page 11: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/11.jpg)
MOBILE MARKETING
Source: http://nrdry.com/3X
![Page 12: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/12.jpg)
MOBILE FINANCE
![Page 13: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/13.jpg)
2. TYPES OF MOBILE APPS
![Page 14: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/14.jpg)
Serious Tools
Fun Tools
Fun Games
Serious Entertainment
Source: http://nrdry.com/3X
TYPES OF MOBILE APPS
![Page 15: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/15.jpg)
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
![Page 16: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/16.jpg)
3. MOBILE UX PROCESS
![Page 17: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/17.jpg)
MOBILE UX PROCESS
1. User Requirements Analysis
2. Conceptual Design
3. Design and Implementation
4. Usability Evaluation
5. Launch and Maintenance
![Page 18: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/18.jpg)
4. DESIGNING FOR MOBILE
![Page 19: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/19.jpg)
Simplicity
User-focused Design
Understanding Devices
Standard UI Conventions
Technology Limitations
DESIGNING MOBILE APPSTHINGS TO KEEP IN MIND
![Page 20: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/20.jpg)
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
![Page 21: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/21.jpg)
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?
![Page 22: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/22.jpg)
UNDERSTANDING DEVICES
![Page 23: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/23.jpg)
CHOOSING A TARGET OS
![Page 24: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/24.jpg)
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
![Page 25: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/25.jpg)
SELECTING TARGET DEVICES MOST POPULAR TABLETS ON THE MARKET
1. 2. 3.
Apple iPad (82%) Dell Streak (3%)Motorola Xoom (4%)
![Page 26: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/26.jpg)
EXISTING UI CONVENTIONS Custom UI Native UI VS.
![Page 27: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/27.jpg)
EXERCISE UI COMPARISON
![Page 28: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/28.jpg)
UI COMPARISON FACEBOOK - IPHONE
![Page 29: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/29.jpg)
UI COMPARISON FACEBOOK - ANDROID
![Page 30: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/30.jpg)
UI COMPARISON FACEBOOK - WINDOWS MOBILE
![Page 31: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/31.jpg)
UI COMPARISON FACEBOOK - BLACKBERRY
![Page 32: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/32.jpg)
UI COMPARISON TWITTER - IPHONE
![Page 33: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/33.jpg)
UI COMPARISON TWITTER - ANDROID
![Page 34: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/34.jpg)
UI COMPARISON TWITTER - WINDOWS
![Page 35: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/35.jpg)
UI COMPARISON TWITTER - BLACKBERRY
![Page 36: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/36.jpg)
UI COMPARISON YELP - IPHONE
![Page 37: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/37.jpg)
UI COMPARISON YELP - ANDROID
![Page 38: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/38.jpg)
UI COMPARISON YELP - WINDOWS
![Page 39: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/39.jpg)
UI COMPARISON YELP - BLACKBERRY
![Page 40: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/40.jpg)
UI COMPARISON
CAN YOU PICK OUT WHICH APP GROUPS BELONG TO WHAT OS?
![Page 41: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/41.jpg)
UI COMPARISON
CAN YOU PICK OUT WHICH APP GROUPS BELONG TO WHAT OS?
IPHONE WINDOWS ANDROID BLACKBERRY
![Page 42: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/42.jpg)
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
![Page 43: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/43.jpg)
UI DESIGN OS GUI TEMPLATES
![Page 44: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/44.jpg)
5. TECHNOLOGY LIMITATIONS
![Page 45: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/45.jpg)
TECHNOLOGY LIMITATIONS Web App Native AppVS.
![Page 46: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/46.jpg)
NATIVE APP
Better Experience
Background Applications
Device Capabilities
Findability
Offline Mode
Games
IN FAVOR OF NATIVE APPLICATIONS
![Page 47: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/47.jpg)
WEB APP
Cross-platform support
Central updates
Accessibility
Development Effort
Open Mobile Web
IN FAVOR OF WEB APPLICATIONS
![Page 48: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/48.jpg)
WEB APPS VS. NATIVE APPSINTERACTIVE PRIMER
http://nrdry.com/8
![Page 49: Mobile UX - A Nerdery Interactive Primer](https://reader031.vdocuments.site/reader031/viewer/2022012922/54c766444a795978548b45ab/html5/thumbnails/49.jpg)
QUESTIONS?Using the questions panels in the GoToMeeting app
On Twitter @The_Nerdery
Send us an email at [email protected]
More answers online at http://nerdery.com