UX for beginners: a practical guide. Part 2

The first part of the material dealt with what UX is, how usability differs from visual / graphic design, and what needs to be done when starting to work on the product interface - whether it be a mailing list , a web application or an offline service. In the second part of the translation, the author will talk about what the UX design process consists of: starting with the information architecture and ending with tests. In addition, we will talk about the role of usability in the team - what a novice interface designer should know when deciding to work with a startup or agreeing to a place in a large company - read all of this below.

Information architecture

“In work it is very important to adhere to a common“ language ”and a single structure - this is necessary when making serious decisions. If people in your organization use different words to describe the same things, problems may arise. Unresolved semantic and taxonomic disputes often lead to an unreasonable increase in workload and confusion, ”said Abby Covert, president of the IAinstitute and author of the book How To Clean Up Any Mess.
')
If the user is unable to cope with the huge flow of information, or if he is entangled in the navigation of the site, his user experience when interacting with the product, brand or service will be negative. To avoid such situations, the usability team designs a so-called information architecture.

The information architecture is designed to structure and organize the content of the site, as well as categorize it, so that users can easily find what they need to achieve the goal. Through the information architecture, usability not only clarifies how each content element fits into the site, but how all these elements fit together in this structure.

Advantages of information architecture:

• Increase customer autonomy and, as a result, more satisfied customers
• Efficient navigation
• Reduced customer support costs
• Reducing the number of denials from your product or service

How does this happen

You can create a hierarchy of content for your site in several ways. One of the most common is card sorting. During a card sorting session, users categorize various site elements into several categories. After that, they need to come up with a name for each category, which, in their opinion, will accurately describe its content. You can use real cards, sheets of paper or one of several online services for card sorting.

Wireframing - "wireframe modeling"

Wireframing in UX design - an image or diagram of a site, software interface or application page that displays:

• space allocation on this page;
• distribution of images and content;
• content prioritization;
• available features;
• expected user behavior.

“Frames” are rarely colored, they do not contain images and are not stylized for a project, because their purpose is to help the usability team understand and establish links between different templates on the website. First of all, you need to identify these templates, and only then think about the aesthetic side of the process. By focusing on the navigation and the structure of the site or product, the UX designer is unlikely to be distracted by the visual component.

The "frame" can be a simple pencil sketch on a piece of paper that you later digitize to create a prototype or add more details.

Guide to creating your first "frame" you can find here .

What is the use of "frames"

We use them to establish a link between the site’s visual design and its information architecture. The process of "frame modeling" helps us to identify various ways of presenting or displaying information, and also allows us to distribute the elements of content in order of importance to users, in accordance with their expectations and goals. "Frameworks" allow usability to determine the main functionality of the page and prepare the design team for the development of prototypes.

Wireframes are also fast, cheap and easy. In the process of designing interfaces, start creating “frameworks” as early as possible and do not stop at one option. Frames is a great way to get an idea to your team or developers.

Advice from the UXBeginner resource:

“If you don’t know where to start the design process, start with the content. You will be surprised how many ideas you will have as soon as you start writing the text. ”[You can read more about it here ].

Final result

When you finish modeling the “framework”, you will see a visual representation of how your site might look, taking into account the results of the research conducted by the user audience. Your "frames" will display the distribution of content, images, buttons, and other interactive elements on the page. In addition, with their help you will be able to trace the transition of users from one page of your site to another on the way to their final goal.

Prototyping

A prototype is a concept for your future website or product that allows you to present its user interface as accurately as possible before starting to write code. Prototyping allows usability to experiment and try new ideas, as well as to check the functionality and usability of the product, so as not to waste money on development. Thanks to the creation of a prototype, the value of each function becomes obvious, and the team of UX-designers can see the design as a whole and eliminate any inconsistencies and shortcomings. Creating a prototype of the interface before starting the development, usabilityists save not only money but also time.

Additional advantages of prototype development:

• You can quickly test your ideas on users.
• To create a prototype, it is enough to have on hand a pen and paper.
• Once the prototype is ready, you can use it to get feedback from potential customers, then continue to develop and improve the initial version.
• In the prototype, you can easily make changes, while spending a minimum of cash.
• The prototype can be used to showcase your product to superiors, customers, and other interested parties so that they have a clear idea of ​​your design.
• Teamwork always takes time and change. Prototypes allow you to try out the design on yourself and get the user experience in real time.

Processes in UX Design: Testing

As with the user audience study, testing is an important part of the usability work, as well as the entire usability design process. Usability designers are testing because it allows them to improve the initial design of a product or site and see how the changes they made during the design phase stand up to criticism. This is a great way to eliminate the shortcomings and problems that were discovered by users before the start of the product development process.

Make sure that real users from outside your circle of friends and relatives take part in the testing!

Testing is an undervalued art. Very often, startups and entrepreneurs postpone this stage, not wanting to waste time and money. Some of them are just afraid to talk to real users. However, testing is not something that you can afford to miss, because even the most simple testing can either approve the idea of ​​your product or hack it in the bud. The money and time spent by the company on testing at this stage, as a result, will save much more. Contrary to popular belief, testing does not have to take a lot of time and be expensive. Moreover, the study showed that testing, involving only 5 users, helps to detect up to 85% of usability problems.

With the help of testing you can achieve excellent results with a minimum of effort.

Start simple

Testing your product should not be a difficult process. User-driven testing can be as simple as creating paper prototypes or “frameworks” to showcase your product to potential customers. You can re-test using these simple methods until you find an acceptable solution to a problem. In addition, you can use prototypes to test more interactive elements on users.

Remember that the sooner you start this process, the easier it will be to make changes, and therefore, the more impact testing can have on the quality of the final product. User engagement tests are designed to help you identify problems and find their optimal solutions. But there are also other types of testing, such as remote usability testing and A / B testing, which will be discussed in more detail later.

Usability testing

Usability testing is usually carried out in "laboratory" conditions individually. The idea is that participants (preferably representatives of your target audience or persons) are asked to complete the task with the help of your product, website, application, while the interface designer or the design team watches them from the side. The goal of individual usability testing is to find out what problems the user has encountered in the interface, and why they have arisen. The advantage of this type of testing compared to remote usability testing is that it allows you to record the actions taken by users, and not just their opinions on the product.

(Do not forget about the difference between listening to users and observing their behavior. You can get more valuable information in a shorter period of time by carefully observing your users during testing, as well as capturing their comments).

Being engaged in designing UX, it is of fundamental importance to observe the actions of users, without interfering or influencing their decisions. Sometimes participants are asked to loudly comment on their actions during usability testing, which allows interface designers to better understand the user's thoughts while interacting with the product.

How is testing performed

Testing is carried out in various ways:

• simple observations;
• questionnaires;
• polls;
• interview.

In fact, to conduct effective usability testing, you will need a clear plan in which you define the goals of this testing, as well as several real users who will interact with the interface, share their opinions and answer questions. Before inviting users, you need to ask yourself the question: “What information do I need to get from this test?” And, having only answered it, you can start drawing up a questionnaire. If you are not going to conduct an interview or create a questionnaire, but simply want to observe the behavior of users when interacting with your website or product, the task remains the same.

It may be worthwhile to invite all members of the team to observe how users react during testing. This will help them understand the problems of usability and show empathy (again this word!) Towards the user. In order not to disturb users, it is worthwhile to use webcams, screen sharing and microphones.

HolgerEggert, the main usability expert of LevelGreen, gave us his recommendations regarding user testing:

“Do not try to solve all problems at once. Start with the most essential, and then test again. This will save you time. ”

At the end of the test, you will be able to analyze the results and on the basis of them create a report. If necessary, you can make changes to your design before moving on to the implementation phase.

Graph Interface Designer Alex Shirazi (Graph Ships) says:

“Many designers see design as a linear process. However, it should be considered as a dynamic process. For example: idea, frames, layout, prototypes. When resources are available, it is important to conduct testing with user participation at each stage of the process. ”

Remote usability testing

Remote usability testing can be useful for a team of interface designers if it is not possible to conduct testing in “laboratory” conditions in real time. For example, when a personal meeting with representatives of the target audience is expensive or difficult to implement, or if testing participants find it difficult to arrange their schedule.

Participants, facilitators and observers can be far away from each other, so they are combined online. Although such a format of testing can be convenient, the value of its results is less (in comparison with the “laboratory” test), since the ability to directly interact with users provides improved quality and accuracy of the test. In addition, in the case of online testing is more difficult to analyze the data.

The advantage of remote testing is that users interact with the product in a familiar environment (for example, at home or in the office). This helps to avoid feelings of anxiety and uncertainty, which overcomes them in an unfamiliar place and can affect the test results.

“Never forget to step back and check whether your design really works. When you do research, remember that it must consist of many iterations. To conduct a single round of usability – testing is always a silly idea, ”- Harry Brignalla quote from 90PerCentOfEverything .

A / b testing

A / B testing is a form of comparative analysis of the quantitative characteristics of two working versions of a site, application, etc. Its purpose is to make changes aimed at statistically significant improvements of a user’s actions. This type of testing requires a deep understanding of statistics in order to correctly compose a test and analyze its results. In addition, you need to have experience in order to select those targets for testing that are more likely to lead to the desired result.

Remember : A / V testing is only useful if you already have a finished product (service) and need to improve it. You should not start with the A / V tests at the design stage - instead, test it with the participation of users. Keep in mind that, although A / B testing is great for obtaining accurate data (which will help you convince bosses, for example), not every design can be tested with it.

A / B testing (also known as split testing) is a research method that consists in comparing two versions of a web page, product, email or system, and determining which version is more successful. By creating versions A and B, you can make changes to the interface, test hypotheses and improve the perception of users. The purpose of separate testing is to see the differences in the behavior of the two user groups and to assess the impact of each version on their actions.

Although using A / B testing will determine which of the two interfaces is more suitable, you will not know why. That is why it is so important to conduct high-quality testing.

Example:
If you have ever mistakenly subscribed to the same newsletter from two different accounts, you probably noticed that sometimes the themes of the same letter are different in these accounts. This happens because the author of this newsletter conducts A / B testing to find out which title more attracts the attention of recipients. One letter may be called “Winter Sale. A 10% discount on all knitwear ", and the second -" Caps, scarves and gloves at low prices ", while the content of both letters will be the same. As a result, the author of the list will be able to determine not only which version of the letter gained more views, but which of the addressees eventually decided to make a purchase. The ability to track user behavior provides a trading company with valuable information on how to sell and advertise a product, and which description format best affects the buyer's psychology.

:
, . : « ?».

, , (Dana Chisnell) usabilityworks :

« : , , . , , , . , , . ».

UX:

, . UX- , , , .

, , . , , , . , , , , «» . , .

UX-, « ». - , .

, UX-, , . , . , .

UX, , , , . , (, ). , UX- (. , , .).

(Holger Egger), UX- Levelgreen :

« . , , , , , . , , , , , !»

UX- , . :

:

• ;
• ;
• ;
• ;
• , , .

:

• , ;
• ;
• , , ;
• ;
• , ;
• .

, , .

:

• , , ;
• ;
• , ;
• , ;
• , [ ].

:

• «» ;
• , ;
• ;
• .

, , , . , , , , , , . «», , , ( ). , , . , , !

, , , :

• ;
• ;
• ;
• Implementation.

, «» , – . , , () . , , . , , , .

, , . , , , . , - [ ]. , , .

(Rob Tannen), - Intuitive, :

« , , – , . – . . . , , UX, ».

, ( ):

• – .
• Let's explain - developers should be clear about what they need to do and how to achieve the desired result. - , .
• – , . , , – .
• – . , .
• – , . , .
• – , . U- , .

Other materials on the Pechkina blog:

• How to design a mailing list that is not annoying: 10 simple tips
• : ,
• Interfaces: How not to do the option of unsubscribing from the email-list
• What should be the email-list, and why users unsubscribe from them