mobile app design - best practices

Mobile App Design – Best Practices

Presenter:

Drew RamseyDrew Ramsey

Who is Smart Online?

Agendag

• FlowMappingFlow Mapping

• Wireframes

• App Structure

• Designing for FailureDesigning for Failure

• Don’t Forget the Little Things

Flow Mappingpp g

• One use case at time

• Take notes• Take notes

• Error handling

• Ending location

Wireframesf

• Details

• Actions• Actions

• Be Wrong

• Share/Review

App Structurepp

• Button Grid

• Tabs with MenuTabs with Menu

• Tabs and Buttons

• Swipe

• Tabs

Best Buy – Button Gridy

MoMA – Tabs with Menu

• Sub‐Categories 

•Main Categories

American Museum of Natural HistoryB tt d T bButtons and Tabs

• Quick, Helpful functions• Use longer descriptions

• Use own icons

•More intense browsing

ESPN – Swipe Structurep

• App per page

• Swipe indicator

• SettingsSettings

Design for Failureg f

• Plan with a developerPlan with a developer

• Gestures

• Loading Pages

• Target sizeTarget size

• Recognizable Icons

Don’t Forget the Little Thingsg g

• Error handlingError handling

• Sending user to web

• Pop‐up Notifications (push, location)

• Button placementButton placement

• Keyboard

• USABILITY

Operating Systems

B k B• Back Button

• Button Placement

• Sharing button

Sum it upp

• Take time to planTake time to plan

• Choose a structure that fits your business

• Study other apps

• Keep your developer in the loopKeep your developer in the loop

• Get the small details right

• Design for operating systems

App Examples Usedpp p

• Best BuyBest Buy

• MoMA

• American Museum of Natural History

• ESPNESPN

• foursquare

QuestionsQ