PWANG UX

Articles, experiences, and thoughts about UX, UI, Coding and the world.

[hydqy-blog]

Day 10: 5 Common Mistakes Designers Make (Part 1)

5 Common Mistakes Designers Make (Part 1).

1. Over design a product.

Good design is as little design as possible. Design as necessary.

Avoid this mistake by: Understand why you’re adding each additional piece of ink, focus on creating value rather than adding features.

2. Saving incorrectly.

Save files to types that you can later easily show to others, or put into your portfolio. Consider more if you want to override old versions. 

3. Prototyping late in the process.

4. Unsustainable design.

Realizing good design and green design are not mutually exclusive attributes.

5. Making promises it doesn’t keep.

Design that makes grand promises should not let down its user. 

Good design does not persuade people to buy things they don’t need, with money they don’t have, in order to impress other people who don’t care.

[hydqy-blog]

Day 9: (Original) 7 Things learnt from a UX meeting.

As an UX intern and a junior UX designer, it is a wonderful chance for me to learn from others during a specific UX meeting. I’m lucky enough to have a great mentor, a UX strategist, who teaches me a lot of things during the meeting and everyday work.

The purpose of this meeting was to emphasis and critique the script for a user testing. The script and prototype (which I made) were presented by one of my colleagues, and my mentor gave us a lot of suggestions by asking us questions constantly and giving her own opinions. Here are the 7 things I learnt from her in this meeting.

I. Set the appropriate goal. Having an appropriate goal for the testing/task. This means that the goals should make sense when considering the general goals (both the companies’ business goal or the design goal for the whole system) and other design decisions. Always ask questions such as, “why do we set this goal?””Does this goal match the actions which users are going to take?” A right goal guides the correct direction for the whole design process.

II. Is the scenario reasonable? The scenario that we set for users should be consistent with our design aim and user pictures. Bad scenario can mislead users to confusions or misunderstanding the task, which can give us a bad result or guide our design in a wrong way.

III. The purpose of every task. Always think about the purpose of each task before letting users to perform. What do you want to test? What do you expect users to do? Make every task worthy.

IV. Why do you do like this? In this case, it means  “Why are you testing it like this (This may have something to do with the decisions made before)?” What would happen if you test like this? What influence does this sentence have on users if you ask in this way? Make sure that every task you design, or even every word you use is reasonable and meaningful.

V. Think like a user. Think about what would you think of the task if you are the user taking it? What action would you do? And will you perform it correctly? This could also help make the task more reasonable before launching to users. Besides, the script of the user testing should also speak like a real people talking with the users, instead of giving orders.

VI. Focus on every detail. Every detail worth discussing. Some details can cause discomfort or misunderstanding to users. Discuss and test the details if needed, and it will make the design perfect.

VII. Thinking mode. The most important thing that I’ve learnt from my mentor, is her thinking mode. This is probably why she can be the leader of the team. She can oversee from a general aspect, to combine the big picture with the small tasks. She always focuses on the purpose of every step we take. Thinking critically is an important part of her thinking mode. By throwing a bunch of questions, waiting for us to answer, she can carry the team moving forward smoothly. This is probably the most important thing that Chinese designers lack, since we were not training to think critically from a very young age.

[hydqy-blog]

Day 8: The product design sprint: decide (day 3)

Link to the article.

Aim: decide which solution will be implemented.

1. Combat the group effect

Ask decision-maker to give their opinion, or even make a decision. Facilitator: “Make a call, Sally!” (Sally is the CEO). Or use special techniques such as “super vote”.

Avoid be influenced by group effect.

2.Search for conflicts

A conflict is a place where there are two or more different approaches to solving the same problem. Conflicting approaches are super helpful because they illuminate the choices for your product.

3. Best shot or battle royale?

Best shot: prototype and testing on one single solution. If everyone are excited about one solution, then go best shot. (or when there’s limited time and participants)

Battle royale: when you need to straggle to figure which one is the best, or you have enough time and participants, then go to battle royale to test each of the solutions, and see which one is going to work best for users. Recommend, because you can always find something surprising.

4. Test your assumptions

List out your underlying assumptions is a good way to revisit the big pictures. The assumptions can be about users (do they like..?), business, technology, or even messaging (use this wording or that wording). You can test them by showing prototypes to users.

5. Whiteboard the user story

Group activity: make a storyboard showing how users will step through prototype, click by click. Draw them on whiteboard, and they will become the spec for prototype.

6. Keep the gloves off

Small decisions to be made during storyboarding that haven’t come up earlier are expected. Don’t hesitate too much. Pick one and go on, and put the other one in your pocket in case the one you choose fails.

[hydqy-blog]

Day 7: Functional Animation In UX Design: What Makes a Good Transition?

Functional Animation In UX Design by Nick Babich.

Purpose: reduce cognitive load, prevent change blindness and establish a better recall in spatial relationship.

We should use it to transport users between navigational contexts, explain changes and reinforce element hierarchy.

6 characteristics of Functional Animation:

1. Responsive. Give quick visual feedback to users.

2. Associative. Associative connection is to help users comprehend the change (which item triggers which change).

Don’t: 

Do:

3. Natural. Inspired by forces in the real world.

4. Intentional. A good transition helps guide the user to the next step of an interaction.

Connect the first state (window) with the second (minimized).

5. Quick. Keep duration at or under 300ms. Don’t let users wait for the animation to finish.

Don’t:

Do:

6. Clear. Avoid doing too much at once. Less is more.

Don’t:

Do:

[hydqy-blog]

Day 6: Complexion Reduction: A New Trend In Mobile Design

A new trend called complexion reduction that has been adopted by many of Silicon Valley’s big companies.

Definition and secret sauce:

1. Bigger, bolder headlines.

2. Simpler more universal icons. (Simple, thin recognizable icons)

3. Extraction of color. (Remove color and make it black and white. Can have one to indicate action)

4. Double white space.

5. Make your App icon brighter. (Where you can show your personality)

Apps are going to look the same as they are the same app.

UX designer’s wireframes are more and more close to the ultimate App’s look.

[hydqy-blog]

Day 5: The product design sprint: diverge (day 2)

The day 2 of the 5 days’ sprint by Google Ventures.

Goal of this day is to illuminate all of the possible paths.

Before that, encourage people to bring old, pre-existing ideas before the sprint.

All the exercises are on paper.

1. Choose part of the problem. In Day 1, we’ve drawn a user story diagram. Look at it together as a team, and divide it into parts if needed. Then start with the most primary part.

2. Take notes (5min). Look at the diagrams, notes and “how might we” sticky notes. Take down what you think is useful.

3. Mind map (10-15min). On the same paper, write down anything (you can draw too). in your head (random position). Mix it with the notes, and loosely organize them.

4. Crazy Eights (5 min). Divide a piece of paper into 8 parts. Based on mind map, draw 8 ideas down within 5 min. No need to be beautiful because you ain’t show it to anyone else.

For best results, you can do a second round crazy eights.

5. Storyboard (10-20 min). Choose good ideas and draw them on 3 sticky notes. Draw better this time, and make sense so that others can read. Show them in a progression: first this, then that, then that. Anonymous, and give it a name.

6. Silent critique (5-10 min). Vote silently.

7. Three-minute critiques (3 min per idea). People talk about own idea, and see what’s to add. Plan for extra time.

8. Super vote (5 min). If CEO or somebody who make decisions, give him more tickets to vote.

9. Repeat. Repeat the loop on other parts if there are.

Tomorrow, we decide which piece of these storyboards go to prototype.

[hydqy-blog]

Day 4: Design Strategy

Design Strategy, Chapter 3 from Saffer’s Design for Interaction (2010)

Before design, you should know what should be designed and why, what’s the value, how to fit in product category, and how to differentiate itself from other products.

Typically, design strategy’s best application is for new products.

Composed of 4 parts: Framing the problem or opportunity to be addressed Determining key differentiators for the product to be designed Visualizing and selling the strategy to the organization Creating a product roadmap and a project plan to achieve the goals of the project

It has to work with company’s overall strategy.

I. Framing the problem Firstly you have to figure out what’s the problem. why it sells not well? better competitor? not good design?

To frame the problem, 2 things: zooming out to establish a border around the problem, then zooming back in to determine the details of the parts.

The first step is to gather information. which has several methods: traditional research, the design brief, and stakeholder interviews.

Then, do success metrics, competitive analysis.

II. Determining Differentiators A major step is to determine what the value proposition is. The value proposition is what customers will get in return for buying or using this product over another, similar product.

Try to define it within 25 words.

We also have to find differentiation. Features are eventually replicated, so designers should strive to find long-term differentiation. (such as specialization, generalize, and localize or change context)

Any differentiators should be checked against the value proposition.

Helpful ways in determining the value proposition and key differentiators are the elevator pitch and the advertisement.

Don’t focus on features and pricing. Just be aware of them.

III. Visualizing and visioning To persuade clients. Illustrate the strategy to better tell stories.

IV. Project Planning and Roadmapping

[hydqy-blog]

Day 3: The product design sprint: understand (day 1)

Day 1 of Google Venture’s 5 days design sprint.

This day’s purpose is to build common understandings of the stakeholders envolved in the sprint, to let everyone has a chance to think like a beginner, and make the direction of the sprint clear.

Have a facilitator.

Exercises could be done (can omit some if unnecessary):

Business opportunities (CEO or product leader walk the team through business opportunities and market), Lightning demos (competitors, products with similar features), Lay it out (walk through important screens), Success metrics (How will you measure success?), Existing research (go over existing user research), Team interviews (including engineering or sales or customer service), Analytics (look at the data you have, like Google analytics data).

Gather data before the sprint is a good idea not to make the sprint overwhelming.

Then, sketch the most important user story. Draw them on the board and decide which one is most important.

How do you know which user story is most important? It depends on the problem you are solving in the sprint. For example:

Helping people understand and get started with your product — you probably want to focus on the experience of a user encountering your product for the first time.

Creating a new product concept — you probably want to look into the future and imagine the value proposition and core features for an engaged user.

Improving conversion rate from a landing page — you probably want to understand why people land on your page and what their goals are.

Finally, after all of these user studies,

choose which ideas to move forward

. This can decide what kind of prototype to test on users at the end of sprint (what kind of problem you want to learn in prototype), and the direction of rest of the sprint.

[hydqy-blog]

Day 2: How to get value from wireframes

How to get value from wireframes by Dustin Senos teaches his own way of using wireframes effectively.

Junior designers often focus on visual designs while senior designers focus on higher levels. Junior tends to come up with a preliminary idea and then work on this idea to the end. Senior designers tend to try different ideas, pick one to continue, and try different ideas based on that, till they get the final design. They think broadly and are not afraid of making mistakes. They can gain more valuable things than merely a good visual design.

The purpose of a wireframe is not to persuade your clients of accepting your design and avoid revision in the future. It is created to solve problems. It is used to explore, to inspire us, and to break out of obvious design paradigms. It helps you choose a right way before speed up.

The process typically is taken on paper.

First of all, you draw 20 boxes on the paper. then you fill 20 different ideas in each of the boxes. You start from the most obvious solution. Then you must come up with new thoughts so that you can fill in all the 20 boxes. If you get stuck, you can ask yourself questions:

“What if the menu is a radial? What if it’s only images? What if there are no images? What would Apple do? What would Google do? What if there are no lists or grids? What are different ways to place the most important elements closest to the user’s thumb?”

If you draw layouts, you could use abbreviation (T stands for title) and symbols (lines stands for statistics), and don’t focus on UI elements. If you focus on UI, you could draw the interface with higher fidelity than drawing layouts.

Now you fill them all in. You’ve think a lot. See which of the solutions are promising. Talk the solutions with others for feedback. Also verbally presentation is a good way to reveal.

Then, repeat the above process. With the feedback and promising solutions, you could draw higher fidelity wireframes on paper in bigger boxes (4 boxes typically, can very). Then still talk to others and get feedback.

Then you use Google Ventures concept “Searching for conflicts” (guess it’ll be my tomorrow’s task) to help you find differences between ideas and make a decision.

Often, you can also sketch another time and think the screen in a flow. What’s the screen before this one, and what comes after.

Finally, create a digital prototype to see how it works.

[hydqy-blog]

Day 1: Jedi Principles of UI Animation

As the beginning of my 100 days challenge of reading a UX article every day, I decide to start with a lecture that I listened to this Thursday:  Kit Oliynyk’s Jedi’s Principles of UI Animation.

According to Kit, there are 3 purposes of UI animation: Material, Functional, and  Delightful. 

Material asks designs following basic physical rules and letting users feel authentic about animations. 

Functional is responsible for providing good user experience and comprehension, drawing users attentions, and giving visual feedback and preparation for next steps (telling users where the objects come from and go to). [Total load time: although animation may take more time to happen, it reduce the time of comprehension, thus reduce the total load time]

Delightful makes animation special and enjoyable and leaves deep impression to users.

Kit improves Disney designer’s 12 principles of animation, and categorize common UI animations into buckets on dribbble. 

Solid drawing: item change follow rules of 3-dimensional space (shape, volume, weight, balance, light and shadow). [What Disney animators used to call Solid Drawing, we call it Material Design today.]

Straight ahead and Pose-to-Pose: Pose-to-Pose is a more linear transition, while straight ahead is not, and changes in a different or even odd way.

Squash and stretch: The animated object may not be that solid and rigid, and have soft, pliable surface and fluid movement (which can be squashed and stretched).

Arcs: Items moves in round ways, also describes the time that is not so straight.

Staging: Emphasize items.

Timing: Not only refer to ease-in and out, but also the sequence of appearance of items.

Follow-Through and Overlapping: Several motions be applied simultaneously.

Secondary Action: Make one motion outstanding, and the other motions secondary.

Ease In/Out: people tend to pay closer attention to objects that slow down. So make things you want to emphasize ease-out.

Anticipation: Can be created by ease-in -- slow down at the beginning of animation to ask users pay attention and give them time to reflect, or created by providing visual affordance (such as words) at the end of the animation.

Exaggeration and Appeal make animation delightful.

[hydqy-blog]

Liberty St.

来安娜堡之后算经历了夏、秋、冬三个季节，从夏天气喘吁吁的在坡上骑上骑下，到秋天红红黄黄的树林中哼着歌，再到冬天积了雪的光秃秃的树干下小心翼翼，原来已经在这条街上来来回回这么多次。但是又好像从来都不厌倦，每天欣赏着这条街上的景色，有时候真的感觉自己身在唯美的电影中一样。或许因为如此，也应该觉得知足。