Mobile-First Design

Katelyn Sessions

Why design for mobile devices?• There are over 3.2 billion mobile web users

worldwide• By the end of 2013, there will be more mobile

web devices than people.• In the U.S., 25% of mobile web users are

mobile-only (they rarely use a desktop to access the web)

http://mobithinking.com/mobile-marketing-tools/latest-mobile-statshttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

The first big question:

Native App or Web App?

Native Apps

• Pros– Works offline– Can generate revenue – Access device’s functionality (Camera, compass,

etc.)• Cons– Device specific– Depend on users to install updates

Web Apps

• Pros– Cross-device, cross-browser, cross-everything

(means less code to maintain)!– Updates in real time– Found through web search engine (more exposure)– Less expensive to produce

• Cons– Slower than native apps– Require internet connection to run

Hybrid Apps?

• Written with web technologies that run inside a native app container.

• Pros– Works offline– Accesses phone’s features– Written with HTML5 and JS

• Cons– Slower than the web browser– Fairly new technology, difficult to debug– Still have to package for different OS

The next big question:

Separate mobile page or Responsive Design?

But how?

• User-Centered Design – A process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process.

• Responsive/Reactive Design – Designs laid out using percentage widths, scalable images and text, and media queries to ensure that the content always fits the viewport.

• Mobile-First Design – Combining these techniques to create a beautiful and effective user experience across multiple devices by designing for the mobile user first.

Mobile-First Design

• This means plan first for:– Tiny screen– Fat fingers– Slow connection– A user in a hurry

• By instituting constraints such as:– 3-Click Rule– One-Thumb Rule– Seconds rather than minutes

But that sounds horrible!

• Limitations are GOOD

But that sounds horrible!

• Limitations are GOOD• Prioritize content

vs.

Graceful Degradation vs. Progressive Enhancement

Conceptualize First

Start by figuring out what your user wants.

Student Portal

• Quick reference• Mostly on mobile• Used by middle and high school students

Data from school district:

• Course request• Documents/Waivers• Attendance• Special programs• Test scores• Grades

• Contacts• Health records• Discipline• Transcripts• Class Schedule

Student User Scenarios

• “It’s the first day of school and I want to find my classes.”

• “I want to find my semester grade for Algebra.”

• “I’m tired, how many more times can I miss 1st period before my grade drops?”

Navigation Schema

• Schedule• Grades• Attendance

• Student Info– Contacts– Special Programs

• Student Records– Discipline– Health– Test Scores– Transcripts

Designing with Constraints

• Size limitations• Speed limitations• User limitations

Designing with Constraints

• Size limitations• Speed limitations• User limitations

Speed Limitations

• Give them everything quickly, 3 clicks or less– Use menus and sub-menus– Label things logically– Give them more than one way to reach a page

Speed Limitations

• Give them everything quickly, 3 clicks or less– Use menus and sub-menus– Label things logically– Give them more than one way to reach a page

• Trick them– Tell them their action was successful right away

• Don’t download the world

Size Limitations

• Text must readable

Size Limitations

• Text must readable• Buttons must be large enough to press• Condense large text areas

A Tangent About Text

• Users hate reading• Large chunks of text frighten them

A Tangent About Text

• Users hate reading• Large chunks of text frighten them• Total lack of text frightens them too

Size Limitations

• Text must readable• Buttons must be large enough to press• Condense large text areas• Vertical scrolling > horizontal scrolling• Avoid large data tables

Grids -> Lists

So far…

• Chosen a platform• Prioritized our content• Found solutions for mobile limitations

Time to Build

• Responsive/Reactive Design – Designs laid out using percentages widths, scalable images and text, and media queries to ensure that the content always fits the viewport.

Live Example

Live Example

To Summarize…

• The number of mobile web users is growing• Choose the right platform• Figure out what your USER wants• Prioritize content• Embrace mobile limitations• Use progressive enhancement and responsive

design• A good product with a terrible user experience

is a terrible product.

The End

Katelyn SessionsUsability Crusader

www.katelynsessions.cominfo@katelynsessions.com

Links-’n-Things

• Live Examples– www.katelynsessions.com/example.html– http://

zurb.com/playground/playground/responsive-tables/index.html

• Resources– http://mobithinking.com/mobile-marketing-tools/

latest-mobile-stats– http://www.cisco.com/en/US/solutions/collateral

/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html