UX notes @joseviso-blog - Tumblr Blog

Undercover UX Design

Undercover User Experience Design is a book that teaches you how to put UX into practice from a pragmatic perspective in an environment with limited resources (budget, time, support, etc.) and gives several advices that are difficult to find in other books on this topic.

In the first chapter it states The Undercover Manifesto, that in summary says:

We believe in going undercover. Your mission is to get people excited about UX without them realizing what you've done.

We believe in introducing UX from the ground up.

We believe change comes through small victories.

We believe in delivery, not deliverables.

We believe good design today is better than great design next year.

We believe in working with people, not against them.

We believe in action, not words.

In the next chapters it explains in detail the different UX methods, techniques and deliverables putting special emphasis on how you can put them into practice in your company even if they're not part of your job.

And at the end, includes a section that gives you advices on how to deal with people of several other teams involved in the creation of a product, like developers, visual designers, product owners, etc.

I bought this book a few years ago and besides I found it useful and enjoyable I had the feeling I wasn't really getting the most out of it. But lately, I've reread some parts of it and read some others that I skipped when I initially got it and now I am finding it much more useful than before. Definitely a must read.

#undercover user experience #ux #user experience

A UX Designer is like Ricky Rubio: he is not the one who scores the baskets, but makes a lot of people happy.

#ux

The new weighing scale of my supermarket

Lately, in my usual supermarket they have changed the previously existing weighing scale in the vegetables section for a new one with a touchscreen.

The old one wasn't beautiful but worked pretty well: you just needed to push the appropriate button from an array with the different numbers associated to the product you wanted. Immediately the label with the price appeared in a slot below:

*Image of a similar one I've found using Google

Most people were able to use it without any problems, spending in the process just a few seconds. You barely needed to wait and it was pretty smooth.

But after they installed the new one doing the same operation has become a torture: instead of showing all the different vegetables available at a glance, the screen shows them grouped in ranges (and in a not intuitive way). You need to browse through several screens to find the product you want:

* Home screen of the current one

In addition, most of the times you tap an element on the screen it doesn't react properly, taking some time, showing a different option as selected or don't responding at all. After several times using it I've come up with a "solution" to make it most reliable (tapping with two fingers) but that's just a workaround and most of the people don't try that at all.

While I'm using it as there are several scales one next to the other, I can hear the conversations of the people next to me and most of them are just complaining about the new system.

Even worse, there is a pile of tags thrown away next to the scales, because most of the people get the wrong one.

All those problems end up causing queues and frustration.

I think this is an obvious example of how new technology should not be employed. Sometimes companies just switch to the new systems just because they are new, but don't consider if that change can cause a benefit at all.

#Interaction Design

If the user can't use it, it doesn't work.

Susan Dray

#usability #susan dray

Very interesting article remembering us how important it is to consider the not digital natives when designing a digital product.

I have experienced something similar too, and I agree we must keep in mind the characteristics of this group of people because in that way we will get the basic foundations right.

It doesn't harm anyone to include labels in buttons with icons, or to give clear and friendly feedback in the different steps in a process. I think we must be focused in the user's goal and make the path for achieving it as simple and easy for them as we can, instead of put our attention on the fancy stuff. Don't get me wrong... fancy stuffs are nice, but it's usually a matter of priorities and I think the first is an understandable and easy to use product.

#user interface #usability

What makes something beautiful?

I always felt intrigued by the characteristics that lead us to say that something (an object, a webpage, a poster, etc.) is beautiful. Think about it... How would you define beauty? It's pretty hard to do.

After some time researching on it, I think it's the combination of the following basic aspects mainly:

Balance, Proportion, Harmony, Color.

But that's not enough. What for one person is beautiful for another one may not be, so the personal circumstances are very important. In this equation enter the context, the cultural and social environment, and the previous experience of each individual too. For instance, what it's beautiful for my grandma is not the same than is beautiful for me. The taste of someone who has been living all his life in a small town on Asia, for sure won't be the same than the one of somebody raised in New York.

In addition there are several other characteristics that in my opinion are very important: simplicity, understandability and a certain amount of randomness. Think about the nature: the clouds, the waves, the flowers,... all of them have certain amount of chaos and unpredictability inside.

I think what make them so beautiful is the complexity we perceive they contain while maintaining that understandable structure. One thing most of astronauts have in common is that after returning from space they describe the views of Earth as beautiful and I think that's a great example to illustrate this point:

Can you imagine something more beautiful than this small ball of earth mostly covered in water with all those vapour spots floating randomly?

#beauty

UX Design and Agile

Interesting explanation of how User Experience Design and an Agile software methodology can be integrated in the creation of software:

Lean + UX + Agile: Putting It All Together from Pathfinder Software

#ux #agile #design

Interaction Design at Google

This video explains how is the process of an Interaction Designer working at Google:

#Interaction Design #Google

How we really use the web

Lately I've been rereading "Don't make me think", and in my opinion, the chapter named How we really use the web is very insightful. Next I summarize some facts that I think are totally true:

Fact 1: We don't read the webpages. We scan them.

There are reasons for doing that:

We are usually in a hurry.

We know we don't need to read everything.

We are good at it.

Fact 2: We don't make optimal choices. We satisfice.

That means we don't analyze every single option and weigh it; we choose the first reasonable option.

There are reasons as well for this behavior:

We are usually in a hurry.

There is not much of a penalty for guessing wrong.

Weighing options may not improve our chances.

Guessing is more fun.

Fact 3: We don't figure out how things work. We muddle through.

For explaining this, a good example is the fact that quite a lot of people type the url of the webpage they want to visit in the search box of Google.

They think Google is Internet and that's how it works.

Reasons for this behavior:

It's not important to us.

If we find something that works, we stick to it.

After this explanation we should realize that muddling through may work sometimes, but it tends to be inefficient and error-prone.

On the other hand, if users get it:

There is much better chance they'll find what they're looking for.

There a better chance that they understand the full range of what your site has to offer.

You have better chance of steering them to the parts of your site that you want them to see.

They will feel smarter and more in control while using your site, which will bring them back.

#don't make me think #steve krug #usability #design

Field Observation with Fresh Eyes

In this video, Tom Kelley (IDEO's General Manager) explains how going out and observing people interacting with products in their environment usually reveals design opportunities:

#field observation #tom kelley #design opportunity

Sketchboards & Prototypes

Sketchboards + Prototypes from Leah Buley

#sketch board #Prototyping #agile

The Five Planes of User Experience

These are the five planes Jesse James Garrett uses in his book "The Elements of User Experience" to describe the user experience design process:

The Surface Plane: A series of web pages, made up of images and text.

The Skeleton Plane: The placement of buttons, controls, photos, and blocks of text.

The Structure Plane: Define how users got to each page and where they can go in any moment.

The Scope Plane: The features and functions of the site.

The Strategy Plane: Incorpores what the people running the site want and what the users want to get out of the site.

This structure builds from bottom to top. That means that the surface depends on the skeleton, the skeleton depends on the structure and so on. To put it in another way, we must start from the strategy plane and continue to the surface. As we advance in this process, the issues become a little less abstract and a little more concrete.

#ux #user experience #jesse james garrett

Watching how people use your websites informs your design intelligence, sort of the way travel is a broadening experience.

Steve Krug

#steve krug #usability

#User Testing #emotion heuristics

You can fix it on the drafting board with an eraser, or on the construction site with a sledgehammer.

Frank Lloyd Wright

#prototyping #design #frank lloyd wright

The Grid System

The grid system is one of the most useful tools in visual design. It provides a uniform and consistent structure to layout, emphasizing top-level elements and providing room for less important controls.

This system divides the screen into several large horizontal and vertical regions. In the ideal case, it uses an atomic grid unit that represents the smallest spacing between elements (the different elements will be spaced in multiples of this unit). In addition, it should also have consistent relationships between the sizes of different screen areas.

To illustrate these concepts, take a look at the layout of Mashable:

If you have in mind what I mentioned before, you will find that the page is divided in 3 main vertical areas, and that the different pieces of information have a similar size in each column:

The grid should be modular (flexible enough to handle necessary variation while maintaining consistency wherever possible), and keep simplicity and consistency. For example: if two areas require approximately the same amount of space, they should have the exact same size. If the layout is close to a simple fraction of the screen, such as a half or third, it should be adjusted so it is exactly that fraction.

The use of a grid system have several advantages:

Usability: Because grids attempt to regularize positioning of elements, users are able to learn quickly where to find key interface elements.

Aesthetic appeal: A well defined grid creates a sense of order that feels comfortable to users and invites them to interact with the product.

Efficiency: Using a grid early in the design process will result in less iteration. The designs are easier to modify and extend.

* Source: About Face 3 (by Alan Cooper)

#grid

User Testing (In-person)

Today I want to share another valuable part of the Coursera's HCI Online Class: designing in-person experiments or user testing.

In the previous post I explained the importance of testing with actual users, so now I am going to focus on the procedure. Next are the different steps:

1. Make clear goals.

Scope: What parts of the prototype do you want to test?

Purpose: What do you hope to learn?

Hypothesis: Make a supposition and try to confirm or refute it during the tests.

Schedule and location: Try to find the best time to do the study and reproduce the most natural place for the product to be used.

Participants: Try to find representative users.

Scenarios: Realistic situations in which the product will be used.

2. Plan out the steps.

Questions to ask: Things you want learn.

Data to be collected: Aspects you need to check to answer the questions above.

Set up: Devices and systems for the test. Try to have the more similar to the ones those people would use in the real world.

Roles: the ideal would be to have at least 2 people: a facilitator and another one who takes notes.

3. Create concrete tasks.

Write down the description so all participants get the exact same instructions and you can effectively compare the performance between subjects.

4. Keep in mind the ethical considerations.

Make consent voluntary and remain people you are testing the prototype, not them.

The test will be valid only if the person behaves as he or she would do in a real situation. It's very important to get them to feel confortable during the test or the results won't be really useful. Remind them that any problem found is fault of the system we are trying to improve, not theirs and any difficulty they find will help us make the final product better.

5. Consider the experiment details.

Order of the tasks: Try to start with a simple task for the user to warm up.

Training provided: Depends on the complexity of the product we are designing.

What to do when a user do not finish? Decide how much time is appropriate for each task.

Create a pilot study to polish the study itself before the real test.

6. Capture the results.

Prepare a notebook, laptop, video-recording, screen-recording, etc. to keep track of unexpected problems, things that work well or problems to rework with our design team.

Use the thinking aloud method.

7. Greet the participants.

In the fist contact with the users, explain the test and get them prepared to start.

8. Collect data.

You can collect this two forms of data (but don't combine them!!! Talking affects speed and accuracy):

Process data: Observations of what the users are doing and thinking (Qualitative).

Bottom-line data: Summary of what happened (Quantitative).

9. Debrief the users at the end so they know what your goals were and you can learn more holistically from them.

10. Analyze the results.

What the data look like? Explore the data graphically.

What are the overall numbers? Use statistical tools to get a quick summary of what happened (mean, standard deviation, mode,...)

Are the differences real? Comparing rates with the Pearson's Chi squared test.

#user testing

Trending Blogs

Recently Viewed Blogs

UX notes