01:06

The Mobile Design Process

posted under by 夏林の黑色地圖 | Edit This
研讀使用者經驗為基礎的互動及介面設計, 也算好一段時間了, 最近重新整理一些網路資源, 想想是該在blog上為自己作點筆記, 方便後續讀書會交流分享...

The Mobile Design Process by Jen Gordon

What is the Application’s Primary Task?
must determine what that primary task is by creating a concise explanation of your apps main purpose and its intended audience, also known as a product definition statement.
"(Your differentiator) (Your solution) for (Your audience)."
an examplefor the iPhone’s “Photos” app:
"(Easy to use) (digital photo sharing) for (casual iPhone users)."

Market Research
Step 1: Prepare to Compare
Step 2: Look for Existing Solutions
Step 3: Uncover Technical Limitations
Step 4: Planning for Future Functionality

Target Audience
Knowing your target audience
develop personas to understanding what the demographic wants to see, and the context in which they’ll use the app.
--> defining a design style, typography, and layout

Use Case Scenarios
Once personas are defined, the characters need to be placed in relevant, true-to-life, “mobile” circumstances.
Where are the users that use the app? Are they on foot, by car, or train?
Forty-three year old Bill is driving to a meeting in downtown London and wants to stop for a cup of coffee. Should the app require that Bill tap the screen several times before finding his coffee shop?
Thinking through the variety of circumstances users find themselves in, and dialing in on scenarios where certain functionality repeats is the key to defining what screens you’ll be designing.

Sitemap
Sitemaps for mobile are critical to design. To design a flow that’s intuitive, understanding the relationship of content to other content provides a way to design simple and usable controls. Mobile app sitemaps differ from website sitemaps as mobile apps should not present the user with multiple ways to get to one place. One door to one room: that’s it. Mobile users don’t have time to make a wrong move then go “back” and try to find the proper path.

Wireframing and Paper Prototyping
Data collected from the use case scenarios will define the content and controls that need to be present on the screens defined in the sitemap. From there you have to design a preliminary layout that will account for each of these design elements. Define a grid and establish the importance of information using the color, shape, and size of design elements.

Ergonomically speaking, users hold touchscreen mobile devices in a way that the thumb position is typically pointed towards the middle of the screen. So, if you want to navigate users around the app quickly, give them controls that allows them to move around holding the device with just one hand!

Consider the variety of ways content can move on and off screen.
For example, mobile sheets are a great way to hide actionable controls until the user is ready to use them.
Think about how you can minimize user input. Provide users with a Picker Table so they can select a choice from a menu instead.
paper prototyping

Creating Final Files
fine-tuned your paper prototypes--> Photoshop.
set up your files at the proper size and resolution.
slice out images, and organize your file using folders.


載自MOBILETUTS+
see the article for more details The Mobile Design Process

0 feedbacks

Make A Comment
top