UX Design for Mobile电子书

Title Page

Copyright

UX Design for Mobile

Credits

About the Authors

Acknowledgments

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

Design Principles and General Design Planning

Switching your perspective to focus on the user

Getting organizations to adopt a user-centered perspective

Design principles

Needs from our human condition

Needs from general expectations

Needs from the specific context of use

General design planning

Being pragmatic

Design is not about making things look nice

Users are not able to tell you what they need

You (or your team) are not your users

User experience is not a list of features

Your goal is not to make your client or boss happy

Summary

Research - Learning from Your Users

How we will do that?

Getting to know your users

Mental model - understand how your users think

What is the conceptual model?

Researching methods

Observation and interviews

Affinity Diagram

The method steps

Card sorting

Open card method steps

Closed card method steps

When is it convenient to perform this method?

Tree Test

The method steps

How to improve the organization

Content organization

Area naming

The working memory limit

Surveys

What we want to discover?

Find the participants

Determining the questions

Open-answer questions

Questions with pre-established answers

Humanize the forms

Research documents

The Persona Document

How should I create a persona document?

Better with an example template

Demographics

Picture

Description

Domain and technical expertise

Goals

Frustrations

Motivations

Scenarios

User journeys

Create a User Journey

Competitors' analysis

Functionality analysis

Vocabulary analysis

Target users, supported users, and non-supported users

Being pragmatic

Recruiting participants

Avoiding biases

Looking for the signs

Summary

Exploring Ideas - Sketching

Adopting the sketching mindset

Sketching basics

Sketching tools

Producing results fast

Adjusting your focus

Timeboxing with the Crazy Eights technique

Organizing your exploration

Decomposing your problem

Identifying conflicts

Communicating your ideas

Creating storyboards

Organizing critique sessions

Being pragmatic

The perfect is the enemy of the good

This is not about inspiration

Connecting the conversation to the design goals

Making tradeoffs visible - you cannot emphasize everything

Summary

Mobile Patterns - Web App, Android, and iOS Best Practices

Web application approaches - responsive, adaptive, and flexible

Responsive behavior

Fluid

Adaptive

Hybrid

Frontend frameworks

Design in columns

Mobile application design patterns

Mobile user interface design patterns

Navigation

Sliding drawer

Upper area tabs

Bottom menu

Placing actions in the screen to facilitate navigation

Back button

Multiscreen task

Explore navigation

Floating buttons

Notifications

Movement in notifications

Circle hint

Count notifications app icon

Dialogs

Galleries with miniatures

Arrows

Portrait (vertical) and landscape (horizontal) orientations

User interactions

One-tap interaction

Share functionality

Comment and review

Secondary actions

Handling errors

Overlay tips

Roadblocks

In-content messages

Displaying a message as the first block of content

Other mobile user interface design patterns

Mobile design behavior patterns

Progressive disclosure

Lazy login

Swipe down to refresh

Search suggestions

Reciprocity

Android and iOS differences

Physical buttons

Screen density and features

UI elements

Being pragmatic

Explore different solutions

Summary

Detail Your Solution - Wireframes and Mockups

Understanding wireframes

Wireframes as a functionality specification document

Layout

Gestures

Transitions

Trajectory

Timing

Duration

Speed

Mockups

Testing your designs with real content

Specifications and assets for multiple screens

Understanding units and pixel densities

Specifications file

Automated solutions

Touch target

Images with good resolution

Pixel perfect icons

Being pragmatic

Learn how to code

Test in real environments

Stay up to date on the latest trends

Summary

Prototyping - Bringing Your Ideas to Life

Adopting the prototyping mindset

Deciding the best prototyping approach for your needs

Deciding on the type of prototype

Selecting the appropriate tools

Planning the prototype

Deciding what to prototype

Deciding how to prototype

Being pragmatic

A prototype is not an early version of your product

A prototype is worth a thousand meetings

Summary

Prototyping with Motion - Using Tumult Hype

The role of motion in prototyping

The basic concepts of Hype

Scene list

Scene editor

Property inspector

Timeline and layers

Code editor

Importing and exporting

Prototyping navigation

Manipulating layers with interactions

Manipulating layers

Using a single layer for the active state

Using separate layers for each state

Supporting scroll and navigation

Supporting gestures

Prototyping complex behavior

Composing animations

Supporting user input

Being pragmatic

Organize your layers

Preview often

Summary

Prototyping with Code - Using Framer Studio

Framer.js

Framer Studio

Understanding CoffeeScript

Let's start coding with CoffeeScript

Variables and operators

Types

Functions

Loops and conditional structures

Objects and methods

Understanding Framer.js

Layers

Animations

Events

States

Components

Creating prototypes with Sketch and Framer Studio

Welcome Tour Prototype

Artboards states

Prototype behavior

Coordinating animations

Drawer Navigation Prototype

Using the ScrollComponent

FAB button event reacting

Drawer menu functionality

Input field search functionality

Bottom Navigation Prototype

Bottom navigation

Being Pragmatic

Be part of the community

Learning resources

Test with your mobile phone

Stay up to date with Framer news

Summary

User Testing

Understanding the role of testing usability

Deciding what to test

Using the right method

Planning the test

Defining the goals

Scenarios and tasks

Defining a script

Setting up the environment

Conducting usability tests

Recruiting participants

Introducing the process

Observing users behavior

Identifying key aspects and summarizing the results

Being pragmatic

Inviting people from your team to view the research sessions

Learning is more important than validating

Check you are answering the research questions

Combining research with measurements

Summary

Bibliography and References

General

Kano model

Gestalt principles

Mental model references

Conceptual model references

Persona document references

Card sorting references

Tree testing (Reverse card sorting) references

Affinity diagram references

Crazy eights references

Survey references

User journey references

Scenarios references

Progressive disclosure

Reciprocity effect

Lazy login

User testing

Mobile patterns

Information architecture

Visual design

Prototyping

Tumult Hype

CoffeeScript

Framer

JavaScript

jQuery

Image sources

Chapter 1

Chapter 2

Chapter 3

Chapter 4

Chapter 5

Chapter 6

Chapter 7

Chapter 8

Chapter 9