UiGathering三月份專題 資訊設計:如何設計讓使用者一看就懂的資訊. 開始報名囉~ 3/19 要上課,只好到時看分享資料...

最近讀了這本UI design for Mobile Devices UI進化論. 老實說剛看到COVER時, 我還真是嚇了一大跳...
心想該不會又是寫給工程師看的開發程式設計之類的...
細讀之後大大改觀, 內容涵蓋互動設計與介面設計的基本概念和工作流程.
對UCD, UX, UI 有興趣的designer可以看看.

博客來書籍館>UI 進化論：行動裝置使用者介面設計.

5 Steps for Wireframing and Paper Prototyping Mobile Apps


Wireframing and Paper Prototyping
Paper Prototyping Comes First
Wireframes Come Second and Must be Shared

1. Focus on the Primary TaskThe first thing to do before you even think about putting pen to paper is to ask yourself this question: what is your app’s primary task? Specifically write down:
"(Your differentiator) (Your solution) for (Your audience)."an example for the app Evernote:
Evernote for iPhone lets you create notes, snap photos, and record voice memos that you can then access any time from your iPhone, computer, or the web.”
"(Omni-accessible) (multiple file type creation and storage) for (casual iPhone users)."

2. Create Use Case ScenariosOnce you’ve defined your primary task, you’ve probably also put some thought into who wants an app that performs this task!
--> give “the people” a name, an address, an occupation and a specific scenario when they might use an app
examples:
"Jane is waiting in the doctors office for a 3 o’clock appointment with her 4-year old son, Chad. She brought her iPad just in case the wait is longer than expected and of course they’re stuck in the waiting room for a half hour before they are called. Jane passes the time by drawing trucks and trains with Chad while they wait for her appointment."
"Jane is in the carpool line to pick up her eldest from school. Chad is in the backseat, bored after a day of running errands. Jane hands her iPad to him with the Doodle Bright app launched. Chad knows which buttons to push because they are intuitive to a 4-year old. "
Instead of designing for mom and son, to have a wider appeal we see that the prototypes should primary be geared towards only the child.
It may be obvious that an app like this would require “thinking like a child” but without this use case scenario to back up that claim, you may fall into the default “adult mode” of thinking about the design.

3. Identify Mental ModelsHow to match your design to what the user expects to see. The better you can do this, the more intuitive your interface will be. “the Secret to Designing an Intuitive Interface”

4. Check the Flowa perfect flow defined for an app? something left out?
--> thinking outside of the “perfect” scenario.
example: scenario is when Chad creates a totally awesome picture Jane wants to save and print, but he accidentally closes the app. What now? Did you account for an auto-save in your paper prototypes?

5. Find the Method that Works for YOUeveryone is unique and creative in their own way. You have to find a method that squeezes the most out of you. Paper prototyping is one of the most creative exercises in the app development process, you have to work on this in your “prime” hours, environment etc.

Other References:
Benefits of Wireframing

A set of printable sketch templates for mobile apps
A huge list of wireframing and paper prototyping tools
excellent wireframing resources

載自MOBILETUTS+
see the article for more detail 5 Steps for Wireframing and Paper Prototyping Mobile Apps

研讀使用者經驗為基礎的互動及介面設計, 也算好一段時間了, 最近重新整理一些網路資源, 想想是該在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

開始報名囉~


線上報名Adobe TW

Join Adobe CS5 launch on 13 APR.