Hand-painted mobile end extreme experience

(Lennart Hennigs Ellazou & Charrywang translation Crispinzhu correction Check the original reproduced please indicate the source)

Mobile End user Experience design is becoming more and more mature. One way to measure this is to look at tools. Prototyping tools allow us to create wireframes and click events such as Balsamiq, axure, and fireworks to help us interpret the target user experience. Cross-browser framework tools such as PhoneGap, Zurb Foundation, and jquery Mobile can help us create prototypes using the Internet localization language: HTML, CSS, and JavaScript.

Why? Example of a sketch

We seem to be in a relatively better position than we have ever had time to design the ultimate experience. However, these tools are also accompanied by hidden costs: They guide us through the critical steps of creating a well-designed product--that is, taking the time to understand the problems we face.
That's why I would suggest that before you open your favorite tool, you should draw a picture of the problem and come up with a concept.
Now, you may be thinking of the following questions:
"Our deadlines are so tight that we don't have time to doodle," he said. We must start at once. ”
"In the XX tool design is so far the faster way, I must soon see the results." ”
"We have to look at the results to our customers or partners or colleagues." We can't show them the hand-painted
Lines. ”
"Sorry, I really can't draw." ”

I have not only listened to other times such objections, I have said to myself.

defines problems and solutions

Hand-painted allows us to define the solution while exploring the problem. It can structure our current understanding of the problem and help us find possible solutions.
When we hand out our ideas, new ideas will sprout. Vague sketches and lack of detail will breed new ideas. In this case, blurring is a good thing because we automatically try to fill in the blanks in our minds. This is why the sketch is "creative": it captures the ideas we have formed and bursts into new sparks. As Bill Buxton in "Sketching User experiences":
"What you learn from a sketch is largely based on the ambiguity of its performance." In other words, they do not specify everything, but encourage the creator to unconsciously integrate into various interpretations. ”

By hand-drawing different solutions, we can explore their feasibility without immediately implementing one of them. This provides us with new insights and raises new questions. Hand-painted is essentially a brainstorming exercise.

The "cost"

of the

sketch

The quickest way to pour something out of our heads is to pick up a pen and a piece of paper and draw it quickly. It takes too much time to do this in our beloved prototype tool: We need to first create a project, use the appropriate library, put some small rectangles on the canvas, draw some small arrows to connect the rectangles, and adjust all the components to make them look better--30 minutes later.
If we don't like what we draw on paper, we can throw it in the trash and start over again. With prototyping, however, it is more difficult to throw away something because we have spent time and effort to create it-even if that idea is not the best, it will be more difficult to start again. On the contrary, the hand-painted content on paper is inexpensive and fast to achieve.

The quickest way to capture and evaluate a vision is to sketch it out.

the sketch as a communication tool

But as the saying goes, a picture wins thousand words. The sketch allows us to discuss the current understanding of the project with the collaborators and the project's focus on people. We can use a lot of different ways to interpret the different aspects of the project (we'll show you the most common way in the next section). In the book "Behind the Napkin," Dan Roam said:
"Pictures can represent very complex concepts, summarize a lot of information, and present it in a way that is easy for us to understand, and they are useful for clarifying and solving various problems." ”

Our small partners can directly point to the gaps in our thinking and discuss possible solutions and alternatives. They can understand our sketches well and give some feedback on the details of their ideas. Showing our thoughts to other people also makes us rethink our thoughts. With this in mind, we see the wrong place and find a better alternative.

the sketch as a collaborative tool

Sketches are a powerful tool to keep projects focused on the early involvement of people in the design process. In the definition process, the following chicken egg problem is very typical: The project focuses on the inability of people to develop a complete set of requirements before they can see some visual solutions, but our designers are unwilling to start implementing solutions until they are sure that the demand is stable-we want to avoid unnecessary repetitive revisions, Because this leads to extra work.
One way out of this dilemma is to hand-draw possible solutions in a collaborative workshop, such as this design studio (see Will Evans's article "Introduction to Studio methodology"). We can lead the project to focus on people's understanding of our concepts (and other records) step-by-step, explaining to them the impact of their needs on the design.
The entry threshold for sketches is also low, and non-designers can also participate. (Whether it's a hand-drawn approach to the project's concern, depending on personal preference, there's a lot of controversy.) You need to make your own decisions. ）
Since drafts are rough and incomplete, it is easier to give feedback. Some people will not endure until they see a page that looks perfect, because they think all the work must have a certain depth. The high fidelity visual effects also distract attention-people tend to talk about visual effects or subtle details rather than focusing on ideas. Sketches let them focus on the core concept.
The only thing you need to overcome is the reluctance to show the untrained work to other people's mental handicap.

sketches are not paintings

A common misconception is that your sketches must be beautifully painted. But interactive design is not art class. Your sketches don't need to look beautiful; they just need to express your thoughts. They are supposed to spark discussions and generate ideas; they're not artwork hanging on the wall. As long as you draw squares, arrows, circles and strokes, you can draw sketches. As Joshua Brewer mentioned in the article "Sketch, Sketch, Sketch":
"The sketch is not the ultimate goal. The ultimate goal is what you learned in the hand-drawn process. So don't worry if you don't hand-draw. ”

Learn how to hand-draw is not the content of this article, but you can learn some basics from the following lectures, articles and bibliographies:

"The ' Art ' of sketching Interfaces" (PPT document), author Jason Mesut and Sam Smith "sketching" (PPT document), author of Jackson Fox "the messy Art of UX sketching, author Peiter Buick sketching User experiences:the workbook, author Saul Greenberg,sheelagh Carpendale,nicolai Marquardt,bill Buxton (Morgan Kaufman Published: 2011) How to hand-painted

Now, I wish I had persuaded you to agree that hand-drawing should be part of your workflow. Let's talk about what to hand-draw in a mobile project.

Divergent hand-painted

In the beginning, you need to collect different ideas for your mobile app or website. Start drawing various versions of a key page or part of it. There are two goals: get a lot of different ideas and explore and evaluate them. The more ideas you have, the more you will choose later. This stage is often referred to as "Divergent hand-drawn".
This stage of hand-painted has an effective multi-page template tool. It provides space to draw 6 different versions of a plan within one page, and it leaves a space for the guidance to describe. Different ideas are presented together to provide convenience for subsequent comparisons and discussions.
There are many online templates (I use the Erik Loehfelm template most often). Choose a template that you like.

Various global navigation change scheme wireframe draft

The screenshot above shows six different designs for an app main menu (incidentally, it vividly proves that my sketches are not beautiful). I don't always come up with 6 different versions (I like to tell myself I'm a person in the pursuit of architecture), but I will try to create at least 3 change scenarios for a single page. Because this is a brainstorming, and you will need a variety of options in subsequent discussions. Here is the number of friends.
If you happen to be exhausted, browse through some mobile UI maps to inspire new ideas (such as inspired UI, Pttrns, lovely UI, and UI Parade). They demonstrate solutions grouped by topic or feature (such as main menu, Chat window). Assemble your favorite sketches into your own ideas.
Develop the habit of naming each sketch. This makes it easier to label differences between scenarios and facilitates subsequent references. I will add notes and annotations to explain the sketches and the ideas that follow them (e.g., strengths, weaknesses, options with other options, issues, new features, etc.). It's also a good habit to label and register dates.

convergent hand-painted

Once you have drawn multiple versions of a draft of an interface, you can choose the best solution. Unfortunately, a single sketch is hard to verify with all interfaces. In most cases, you need to blend several creative or creative aspects to form the winning concept. In order to achieve this, you need to draw a more detailed sketch to delve into. Use blank areas as annotations. Jot down all questions, new ideas, points or unknowns, and things to be discussed. These will help others to better understand your ideas. This work is often referred to as "convergent hand-drawn".
For more information about divergent hand-drawn and convergent hand-drawn, see Leah Buley's speech at the 2010 Losers ' Conference (FailCon): "The Well Design Faster", and Brandon Shauer article "Sketchboards: Discover decoupled + Faster UX FX ".

Create UI Process

After the idea of several key pages is summed up, the next step is to explore how they work together. To do this, create some UI processes (that is, a series of key pages) to show how a user will accomplish a task through your solution. The UI process emphasizes what interface elements are used (for example, which button to click or which gesture to use) and how the system responds (for example, feedback from an animation, transition, pop-up box, or new page). They also show different states of the key interface (for example, initial whitespace and fill in the content).
You can visualize different results in a UI process (such as searching for results pages and searching for pages without results). Your process is better no longer just a single line. Different branching processes will show different results. However, try to limit the number of branches in a single UI process. Each additional branch increases complexity, making your process difficult to understand and difficult to explain.

The UI process visualization presents how the user processes from A to B.

You don't need to draw all the use cases, choose the most important and most used use cases. The Pareto principle is a good standard: 20% of the functionality will be used in 80% of the time.
I usually start drawing from an important use case and finally solve it. I'll highlight the interactions between the interfaces, and usually use arrows to connect to each other. I'll explain each step and mark the important page. Again, I'll make a broad comment.
For ideas on how to inspire the mobile interface and UI process, check out Gisele Muller's article "Inspiring UI Wireframe Sketches"; Moobileframes a blog that provides a mobile interface diagram; Wireframes, Jakub Linowski's personal site. You can also apply Jakub's interactive sketching notation (PDF document) to your UI process.

procedure

To give you more context and demonstrate the relationship between the three ways mentioned above, now provides a typical hand-drawn step decomposition:

lists existing information and established goals draw the first set of sketches (e.g., a key interface of a variety of scenarios or an initial UI process) self-review sketch


What are the pros and cons of each scenario?


are the UI components and data consistent? (i.e. whether the same component is used in the same task)

are
data displayed the same way?


Is the interaction option clear? Consult other people's opinions. Start with coworkers and then to potential users.


what was their first impression?


, which one do they like best? Why?

Which one does
like the least? Why?

What information in the
sketch do they not know?


What improvement advice did they make? Why? Review the various conceptual schemes

Can
combine the advantages of each concept scheme into one?

Can the
sketch be further cleaned up?

Can the
step be further reduced? Review
again based on initial feedback
Does
introduce new problems?


What inspiration can you get from it?

Do you find that there are a lot of "why" here. This is because hand-drawn is designed to improve understanding of the problem while presenting the solution. After hand-painted, write down the problems arising in the drawing process. They will guide you in the right direction.

beyond hand-painted

After creating a sketch of a key page and a core use case, you'll want to experiment with your concept on a real phone. Like POPs and Protosketch, you implement pictures of imported sketches and turn them into prototypes. This super fast method of low fidelity can find some feeling for the interactive solution. These two apps allow you to define clickable hot areas and page transitions, making the interactive prototype more authentic.
In addition, you can choose to import pages to generate prototypes in more advanced software such as Axure.
Whichever tool you choose, your goal is to quickly test prototypes on real phones at very small cost.

Portable Tips

Hand-painted can help you better understand the problem and visualize potential solutions. This is a quick and economical brainstorming approach, and it also tests a lot of concepts before locking the solution. Hand-painted accelerates concept creation and iterative phases, and enables early problem feedback at easy stages of program change.
In your next hand-painted link, keep the following principles in mind. They can help you stay right:

Lazy


don't try to reinvent a wheel. Hand-painted with ready-made templates. Inspire Inspiration


Browse the Design paradigm Library and mobile UI Gallery, and view the Wireframe diagram example. Pick what you like, mix your own ideas, and create new solutions. enough to


your hand-painted to convey your thoughts. Don't get lost in (unimportant) details. How does Pareto work?


Only a small subset of the features in your solution will be used most frequently. Focus on them. Figure out which 20% of the options will be used in 80% of the time? Maintain Unity


with existing hand-painted markers or create a way of your own. This way, your hand-drawn is more reliable. Colleagues can better understand your style, spend less time browsing through hand-drawn and giving feedback. Detailed notes


hand-painted process, will emerge a variety of new propositions, ideas, questions. Write them down, or you'll forget. Open Mind


your hand-painted. Nail them to the wall, and be diligent in demonstrating solutions to others and getting feedback. Falling into doubt, continued to hand-painted


when you are not sure of a solution, start the derivation scheme again. List their pros and cons and figure out what the best scenario is from feedback.

Hand-painted happy!

Source: http://mxd.tencent.com/Hand-painted mobile end extreme experience