Week 7: Prototyping and usability part 1

UXD720

---

This week covers usability testing, prototyping and design patterns.

Usability testing

Usability testing is a crucial stage in the design thinking process. This involves a structured observation of participants using the product you are designing. The tester asks the participant to complete a set of tasks, and the purpose is to test the product rather than test the users. The observations are recorded and analysed and help reveal issues in the design (Bastien and Metz 2010: 5).

Usability has two elements which are formative and summative. Formative refers to discovering usability issues, and summative is the metrics of achieving tasks and goals (Lewis 2014: 664). Both come together to identify if the product has been designed well to be usable and useful.

This week's activity was conducting usability testing on my low-fidelity wireframes to gather feedback and insights on my designs. Involving the user in the process helps guide the design in the right direction and prevents errors and redesign later on. The great benefit of testing low-fidelity wireframes is that it answers the question, "is it being designed the right way?" (Smith 2017). Low-fidelity wireframes focus on user flows and journeys, navigation, page structure, and content information and hierarchy.

The Nielsen Norman Group recommends testing with five or less users to generate the best results (Nielsen 2000). I conducted a moderated usability test with one participant, my target user. I struggled to plan how to conduct usability testing on a non-functional wireframe. It is difficult for the user to see the interaction and relationship between the frames. However, it was encouraged to test anything and everything anytime. I solved this issue by adding arrows between the frames to see the flow and connections and explained this to the user.

I set small tasks for the user to complete and made sure they spoke about what they were doing and their thought process throughout the testing. Examples of tasks included "walk me through how you would sign up to the app" and "walk me through how you personalise the app to tailor to your needs".

Figure 1: The first version of my low-fidelity wireframe.

Figure 2: Below are the results of the usability test.

Summary of results

Conducting the usability test for the first time has given me a significant insight into how valuable the process was. Observing the user engaging with my wireframe in real-time allowed me to understand better what worked and what didn't. There were small details that I had missed, for example, adding a verification page that the user has successfully created an account. It shows the visibility of system status by communicating to the user the result of their action, which builds trust between the user and the system (Nielsen 2020).

One of the main issues was the onboarding process. The user had mentioned that it was too long, making them lose focus in wanting to use the app. Moreover, there was some confusion about the wording and content. For example, the user didn't understand the acronym HRV, which is heart rate variability.

Prototype

Prototypes are a functional representation of the product formed from the wireframe designs. The purpose of prototypes is to show the interactive digital experience and flow and used at any stage of the development process (Patrick-Brown 2021). It takes time and effort to build and used in usability testing to evaluate the design and functionality.

Creating an interactive prototype

One of the activities this week requires creating a small interactive prototype. I have decided to use Figma as I would like to become an expert in this software, and it is one of the most popular tools in UX industry jobs. Moreover, one of my SMART goals is to develop my skills in this software.

‘A good design should put an emphasis on utility, not only with beauty’ (Amiana 2020). The goal is to design a useful and usable product with a clear purpose. Don Norman explains that good design is more difficult to notice because it is invisible and allows users to complete their tasks seamlessly. However, if something is poorly designed, users see it straight away. His book ‘The design of everyday things’ discusses the seven design principles: discoverability, feedback, conceptual model, affordances, signifiers, mappings, and constraints (Norman 2013: 72–73).

Figure 3: I have created a small prototype based on version 1 of my low-fidelity wireframe. This prototype shows the onboarding process and interaction between each frame. The first frame is the splash screen which includes a delay and then automatically transitions to the next frame. The ‘next’ and circle buttons navigate to the subsequent frames until the user reaches the sign-in page.

Design patterns

This week’s content was significant because I anticipate learning about the user interface and the fundamentals of design patterns. Design patterns are a model used to solve a problem in websites, mobile applications and other software and technology devices (MacDonald 2019: 1). Examples of design patterns include image zoom, pagination and breadcrumbs. Design patterns can be designed and used depending on the context and user needs (Javahery and Seffah 2012: 110). Studies reveal that a practical approach to identifying the suitable patterns is creating a persona, identifying patterns for each persona and composing the patterns to create a conceptual design (Javahery and Seffah 2012: 107).

I wanted to learn what and why specific patterns were considered good or bad designs. In the course content, an example of good design was using circles to indicate the number of frames there were, and also, users were able to recognise and interpret that they could quickly scroll left and right of the frames. However, the apple IOS was shown as an example of a bad design. This surprised me because Apple’s interface is a success and preferred over Android.

Figure 4: The example shows the options available for a user if they selected a photo. There are several options such as airdrop, messages, mail, Whatsapp and part of the Instagram app. This isn’t very clear that Instagram is available and that the user should scroll to see more options available to them. How would the user know to interact with this feature?

Identifying design patterns

One of the activities was to identify design patterns to apply to my prototype project.

I will be implementing informational components such as notifications, tooltips and a progress bar. This will keep the users informed in the app journey.

• Tooltip is a beneficial feature users can see when they want to know more about a specific topic or feature.

• Progress indicators allow users to see how far they are within a journey or stage in the app, particularly the personalisation questions within my prototype.

• Notifications will remind users about a task they need to do, which are motivational cues to drive them to engage with the app.

I will be using navigational components such as sliders, icons and breadcrumbs.

• Sliders will gather data from the user, for example, to collect their weight and height. This gives a sense of user control within the app.

• Icons in the global navigation will be easily understandable.

• Breadcrumbs such as the back button would allow users to go back to a page if they made a mistake to return to their starting point.

Input controls such as text fields and buttons

• Users can input their email and password to create an account.

• Buttons will guide users to the next step or a feature. I will include ‘show more’ buttons to control how much content they see (Moran 2022).

Reflection

I have learnt usability testing is valuable for discovering insights and issues you might not see when designing the product. It is very beneficial to test your designs early in the project and involve the users throughout the development journey. Asking scenario-based questions, such as “tell me about a time” or “walk me through how you would…”, in a usability test scenario can reveal in-depth results (Rosala 2022). I believe I have made a good start on my SMART goal 3 by conducting my first usability test and gathering useful insights to improve my designs.

The user interface design is crucial and needs to be minimal and straightforward. Strive to design content with the ‘less is more’ approach.

It was challenging to test the wireframes because I had to explain the background to the usability test in lots of detail. Next time, I would add interactions to my wireframes and conduct usability tests to solve this issue to create a realistic user experience. This would make it easier to test with users, and I can observe the user engage with the prototype.

I want to look into current UI/UX design trends to implement. This allows my prototype to be innovative with the new technologies today and in the future.

References

AMIANA, Dave. 2020. ‘General Principles of Design — Don Norman’s Principles’. UX Design [online]. Available at: https://uxdesign.cc/general-principles-of-design-don-normans-principles-4e2d97267905 [accessed 11 Mar 2022].

BASTIEN, J. M. Christian and U. P. METZ. 2010. ‘Usability Testing: Some Current Practices and Research Questions’. International journal of medical informatics [online]. Available at: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.395.2740&rep=rep1&type=pdf.

JAVAHERY, Homa and Ahmed SEFFAH. 2012. ‘P2P Mapper: From User Experiences to Pattern-Based Design’. AIS Transactions on Human-Computer Interaction 4(2), 107–28.

LEWIS, James R. 2014. ‘Usability: Lessons Learned … and yet to Be Learned’. International journal of human-computer interaction 30(9), 663–84.

MACDONALD, Diana. 2019. Practical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience. Apress.

MORAN, Kate. 2022. ‘Alternatives to Pagination on Product-Listing Pages’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/alternatives-pagination-listing-pages/?utm_source=Alertbox&utm_campaign=64ea82a793-EMAIL_CAMPAIGN_2020_11_12_08_52_COPY_01&utm_medium=email&utm_term=0_7f29a2b335-64ea82a793-40750905 [accessed 8 Mar 2022].

NIELSEN, Jakob. 2000. ‘Why You Only Need to Test with 5 Users’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ [accessed 7 Mar 2022].

NIELSEN, Jakob. 2020. ‘10 Usability Heuristics for User Interface Design’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/ [accessed 14 Jan 2022].

NORMAN, Donald A. 2013. ‘The Design of Everyday Things’. In Published in 2013 in New York NY) by Basic Books. New York (N.Y.) : Basic books, 2013.

PATRICK-BROWN, Clementine. 2021. ‘Week 7: From Wireframes to Prototypes’. Learn.Falmouth [online]. Available at: https://learn.falmouth.ac.uk/courses/282/pages/week-7-from-wireframes-to-prototypes?module_item_id=12783 [accessed 14 Mar 2022].

ROSALA, Maria. 2022. ‘6 Mistakes When Crafting Interview Questions’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/interview-questions-mistakes/?utm_source=Alertbox&utm_campaign=64ea82a793-EMAIL_CAMPAIGN_2020_11_12_08_52_COPY_01&utm_medium=email&utm_term=0_7f29a2b335-64ea82a793-40750905 [accessed 7 Mar 2022].

SMITH, Robert. 2017. ‘Validating Product Design Ideas with Low-Fidelity Wireframes’. Medium [online]. Available at: https://medium.com/@robertsmith_co/validating-your-product-design-ideas-with-low-fidelity-wireframes-fba03b84af23 [accessed 7 Mar 2022].

Images

LIMPITSOUNI, Katerina. 2021. Undraw [SVG]. Available at: https://undraw.co/illustrations.

‘Nutricoach’. 2022. Appadvice [online]. Available at: https://appadvice.com/app/nutri-coach/1183731130 [accessed 14 Mar 2022].