23:54
5 Steps for Wireframing and Paper Prototyping Mobile Apps
posted under
UX. UI. Interaction note
by 夏林の黑色地圖
|
Edit This
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
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



Comment Form under post in blogger/blogspot