I am always ready to learn although I do not always like being taught.
- Winston Churchill
The problem with doing too many things is prioritising. I have two major projects at work that are taking up most of my time and thought process. I am using all holiday I have at work to dedicate to university which leaves me little time to actually relax. I keep telling myself it wont be forever but it certainly feels like it! I have made some good progress with the app prototype and have switched from low-fi paper prototypes to higher fidelity Figma hot spot prototypes, I need to figure out how hi-fi to go with it as i feel like I could just keep adding detail, but I think overall UX is more important at this point.
What is a prototype?
It is a functional version of your design, they are usually digital but can be analogue too (paper prototype) they are a key component in usability testing.
This is where wireframes and prototypes differ and overlap (insert infographic)
Wireframes are static and prototypes are dynamic. Wireframes don’t tend to be used in usability testing but can be turned into a prototype. Wireframes represent screens and prototypes represent the functional flows. Wireframes range in visual fidelity where as prototypes range in functional fidelity.
Why do we use prototypes?
- To simulate an interactive digital experience
- To ensure designs are reading well on intended platforms – mobile, desktop and tablet.
- To test with users through all phases of the design cycle.
Pros and cons
Protoypes are more realistic makes it easier to see how it would manifest digitally. Prototypes are more realistic and make it easier for someone to start thinking about how the product would manifest itself digitally.But a con is that they dotake some upfront effort to create lo fi being less time intensive, obviously, than hi fi.
What is usability testing?
Usability testing is watching people try to use what you’re designing or something you’ve already designed with the intention of making it easier for people to use or be proving that it is easy for people to use if a website is difficult to use. People will leave if the home page fails to clearly state what a company offers and what users can do on the site. People will leave if users get lost on a website They’ll leave if a website’s information is hard o read or doesn’t answer user’s key questions, they will leave this is why you need to test what you’re building.
Structured observation
Participants try to complete tasks while observers watch and listen and take notes. They can last from ten minutesto 90 minutes Longer than 30 mins You should consider an incentive for your users. he goal is to identify any usability problems. Collect qualitative data and determinethe participant’s satisfaction.
What do we gain?
- Discover users expectations.
- Discover why problems are happening.
- Identify changes required to improve user performance and satisfaction.
- Cheap and easy way to get actionable feedback.
What to test and when
Test early and often at regular intervals and anytime you have something new. Test anything and everything you can. New designs, paper prototyping, lofi and hifi prototypes, usability and accessibility and final designs.
Steps of testing
Plan – create a test plan and set up a test environment with the necessary materials.
Recruit – recruit your representative users.
Conduct – Ask participants to performrepresentative tasks with the design. Observe what the users do, where they succeed and where they have difficulties.
Analyse – Analyse the results you’ve collected.
Report – report and present your findings.
Anatomy of a plan
Purpose and goal these goals should be specific anddeclarative with some measure of success.
Logistics where, you have in lab testing, remote testing and gorilla testing. How, moderated or unmoderated.
Participants, who to test, target audience, how to recruit them. Recruit users based on personas. 80% of problems are discovered with 5 participants.
Scenarios & tests, how to write the tasks. High quality, realistic. Actionable but not leading. Prioritise tasks
Metrics and script. two types of data quantative and qualitative.
Conduct the test
- Brief
- Collect preliminary and background information.
- Collect performance data
- Collect subjective data
- Wrap up with participant
- Debrief
Best practice
Follow up – Frustrations, satisfactions?
Keep them talking – six sigmas
Dont interfere – dont tell them what to do or help.
Question their questions – answer their questions with questions.
Qualitative survey
System usability scale, each response recives 1 to 5 points which can be calculated into a usability score.
How to calculate
X + Y x 2.5
X = (sum of the points of odd numbered questions) – 5
Y = 25 – ( sum of the points of even numbered questions)
SUS Score
> 80.3
68 – 80.3
68
51 – 68
< 51
Grade
A
B
C
D
F
Adjective Rating
Excellent
Good
Okay
Poor
Awful
Interaction design has been around at least since the 1980s but only fairly recently has it come to gain shape and form like any other discipline. Much like UI design, IxD has a lot of crossover with UX design – they both help shape the overall encounter with the use of a product, including programming, building information architecture, usability engineering, user research etc. Interaction design is involved in helping a user reach their goal via smooth, pleasurable, quick interactions with an object or a machine – this is the concept of human computer interaction (HCI)
What is an interaction?
nteraction design focuses on somethingthat traditional design disciplines do not often explorethe design of behaviour. The goal of interaction design is to create products that enable the user to achieve their objectivesin the best way possible.
The 5 dimensions
Words – How do we communicate a reasonableamount of information to users?
Visual representation – images, icons recognising the share icon despite not being in a foreign language.
Physical objects/space – devices Peripherals and the spacein which users use their devices.
Time – things that unfold in time, motion sounds, etc..For example, the sound an iPhone makes when you send a message.How long do users use the device? Can they resume the interaction?
Behaviour – The user side of the interaction, interactions and reactions. example the emotions of feelings users have from interactions.
Don Normans principles of interaction design.
visibility, feedback, constraints, mapping, consistency, affordances. The 5 demensions should follow these principles. Dimensions of what the interactions areand the principles are. How to design themso that they’re good interactions. These are different schools of thought, but they have plenty of overlap.
Principle 1
Make it visible, Visibility is the basic principlethat the more visible an element is, the more likely users will know about itand how to use it.
Principle 2
Provide feedback, feedback is the principleof making it clear to the user what an action has been takenand what has been accomplished.
Principle 3
Ensure proper constraints, a constraint is an aspect of the designthat restricts the user against all odds. People will do things that you don’t intend for them to do, so you need to build constraints into the system. Constraints are about limiting the range of interaction possibilities for the user. So you can simplify the interface and guide the user to the appropriate next section. Voice technology has been used utilising the principle of constraint because the possibilitiesare virtually endless.
Principle 4
Mapping, mapping is about having a clear relationship between controls and the effect they have on the world. Make it as natural as possible.
Principle 5
Consistency means similar operations and similar elements for achieving similar tasks. When you use consistent pieces throughout the entire interface is much easier for the user. This is also important across devices. An example of poor consistency is when there are so many different designs for actions that the user can take across your interface that it’s confusing. one of the best ways to drive consistency across applications is to make use of Google’s material design guidelines and iOS human interaction guidelines when you’re designing mobile apps.
Principle 6
Build strong affordances and affordances refers to the attribute of an object hat allows people to know how to use it. Contrasting colour, shape fill are all affordances that suggests that a button can be pressed. And affordances is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used. Don Norman – design of everyday things.
I love those who can smile in trouble, who can gather strength from distress, and grow brave by reflection. 'Tis the business of little minds to shrink, but they whose heart is firm, and whose conscience approves their conduct, will pursue their principles unto death.
-Leonardo da Vinci
During the development of the app I am creating, Ive gained a better understanding of the importance of usability testing. Through this process, I have been able to identify areas of the app that could be confusing or difficult to use for the target audience. It was also helpful to create wireframes and prototypes to test out different design options and functionality. The UI and interaction design are key components of the app, so I learned more on how to create a visually appealing and user-friendly interface that encourages engagement with the content. Having also been able to implement this in a working environment on the redevelopment of a website I have implemented some changes to the UI to reflect what I have learnt. Mainly around consistency for call to actions. It helped me identify issues and areas of improvement that I would not have noticed otherwise. Testing should be done throughout the development process to avoid major changes later on and this has proven true with both work and university projects.
Looking into design patterns, Progressive Disclosure Patterns etc this pattern involves revealing information to users gradually as needed, rather than overwhelming them with too much information at once. It can help prevent cognitive overload and make the app more user-friendly. This would be good for an onboarding experience, maybe with gamification and incentivisation once onboarded. I also looked at navigation patterns and higherarchy, material design patterns for clean minimalistic design which is important in the limited space of a mobile app.
I had a few friends test the hotspot prototype I created and what I have done so far on the app and Overall, the usability testing phase was crucial in identifying areas of the app that needed improvement. By gathering feedback from users, I was able to make changes to the app that improved its overall functionality and ease of use. Even creating simple wireframes and paper prototypes allowed me to test out different design options and make changes before fully committing to a design. The UI and interaction design were well received by users.
I also implemented a feedback session for the website I am creating at work and gathered some good information and feedback that proved I am on the right track. I analyzed the effectiveness of each design and made informed decisions about the final design based on user feedback.
Usability testing, wireframes and prototypes, UI design, and interaction design are all important components and by prioritising these aspects of the development process, I was able to create easier to use elements for both this project and other projects I am working on hopefully producing visually appealing, and engaging designs.
Through my reflection on these topics, I have gained a deeper understanding of the importance of user-centered design and the role of feedback in improving the overall user experience.
One crucial aspect of UI design is the use of design patterns. Design patterns are reusable solutions to common design problems, and they can improve the usability and accessibility of an app by providing a familiar and intuitive interface for users. By incorporating design patterns into the app, I am able to create a consistent and cohesive user experience, which is essential for building trust and engagement with users, particularly useful with a charitable donation app which already has issues around trust just based on the research I have done into donations and charities.
In future app development projects, I plan to continue prioritising usability testing and creating wireframes and prototypes. I plan to expand my knowledge and skills in UI and interaction design and do more research into both to create even more engaging and user-friendly designs. I will also explore new technologies and design trends to stay current in the rapidly evolving field of app development.
I would like to continue to explore new design patterns and experiment with different interaction design techniques to create more engaging and innovative user experiences. The design and development of this app have been a valuable learning experience for me, and I am excited to continue to develop my skills in UI and interaction design and look more at user-centered design principles.
[~30 minutes]
- Visit a website (any website) and write out two tasks you could use in a usability test.
- Have a look through your wireframe sketches from Week 4, and write out two tasks you could use to test the usability of your own product. Remember, make them:
- Realistic
- Actionable
- Not leading
I asked some friends to complete a login process and to sign up to the app in any way they chose to and then thought about what could come after that login process. I got positive feedback about the design and idea in general as I explained the concept to them.
[~60 minutes]
- Create a three-page wireframe prototype with your design tool of choice (industry standards are Sketch, Figma, Adobe XD).
- Create rough wireframes of your product. You only need to prototype the pages that will facilitate testing your tasks (from above).
- As you wireframe, focus on the happy path.
- Upload your pages into your prototyping tool of choice (industry standards are inVision or Marvel) and create hotspots to link them into a journey. (If your design tool is good at prototyping, of course you can use that too.)
I created a hot spot prototype in Figma to synthesise a login/sign up process. I figured out what pages should come next for onboarding and a few of the main pages for the design. Its quite low fi at this point with no logos or colour
[~30 minutes]
- Identify at least three design patterns that may apply to your UX Prototype project. You do not need to design them, just identify patterns that might work for your project. (For a list of design patterns, see ‘Examples of UI Design Patterns’ in the slides for Intro to UI Design).
- Explain why you chose them, and write about it in your reflective practice.
See above in reflection.
- Prototyping Articles & Videos (2019). Available at: https://www.nngroup.com/topic/prototyping/Links to an external site. [Accessed 27 March 2023]
- Anders Toxboe and Anders Toxboe (2020). Design patterns. [online] Ui-patterns.com. Available at: https://ui-patterns.com/patterns.[Accessed 27 March 2023]
- Palliyaguru, C. (2018) ‘Basics of Prototyping’ [online], UX Planet, 24 September. Available at: https://uxplanet.org/basics-of-prototyping-1a4106e12c0eLinks to an external site. [Accessed 27 March 2023]
- Smith, Q. (2019) ‘Prototyping User Experience’ [online], UX Matters, 7 January. Available at: https://www.uxmatters.com/mt/archives/2019/01/prototyping-user-experience.phpLinks to an external site. [Accessed 27 March2023]
- Usability Test Plan Template (2020). Available at: https://www.usability.gov/how-to-and-tools/resources/templates/usability-test-plan-template.htmlLinks to an external site. [Accessed 27 March 2023]
- Loranger, H. (2016) ‘Checklist for Planning Usability Studies’ [online], Nielsen Norman Group, 17 April. Available at: https://www.nngroup.com/articles/usability-test-checklist/Links to an external site. [Accessed 28 March 2023]
- Schade, A. (2013) ‘Making Usability Findings Actionable: 5 Tips for Writing Better Reports’ [online], Nielsen Norman Group, 14 September. Available at: https://www.nngroup.com/articles/actionable-usability-findings/Links to an external site. [Accessed 28 March 2023]
- Usability Testing Report Template and Examples (2020). Available at: https://xtensio.com/usability-testing-template/Links to an external site. [Accessed 27 March2023]
- Design Guidance and Code (2020). Available at: https://material.ioLinks to an external site. [Accessed 28 March 2023]
- Usability Testing Report Template and Examples (2020). Available at: https://xtensio.com/usability-testing-template/Links to an external site. [Accessed 27 March2023]
- Pattern Library (2020). Available at: https://www.pttrns.comLinks to an external site. [Accessed 28 March 2023]
- Mobile App Design Patterns (2020). Available at: http://inspired-ui.comLinks to an external site. [Accessed 28 March 2023]
- Nielsen, J. (1994, updated 2020) ‘10 Usability Heuristics for User Interface Design’ [online], Nielsen Norman Group, 15 November. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/Links to an external site. [Accessed 23 March2023]
- Fabian, A (2020) ‘UI Trends 2020: Top 10 Trends Your Users Will Love’ [online], UX Studio, 5 November. Available at: https://uxstudioteam.com/ux-blog/ui-trends-2019/Links to an external site. [Accessed 23 March 2023]
- Ambwani, P. (2020) ‘Visual trends that UI designers should keep an eye on’ [online], UX Collective, 27 January. Available at: https://uxdesign.cc/visual-trends-that-ui-designers-should-keep-an-eye-on-e622d9086310Links to an external site. [Accessed 28 March 2023]
- Bergher, B. (2017) ‘Coherent, Not Consistent’ [online], UX Collective, 7 August. Available at: https://uxdesign.cc/coherent-not-consistent-b44244dadec4Links to an external site. [Accessed 28 March 2023]
- Ved (2017) ‘Interaction Design patterns: iOS vs Android’ [online], Medium, 15 April. Available at: https://medium.com/@vedantha/interaction-design-patterns-ios-vs-android-111055f8a9b7Links to an external site. [Accessed 28 March2023]
- Ruthi (2018) ‘Disney’s motion principles in designing interface animations’ [online], Medium, 17 December. Available at: https://medium.com/@ruthiran_b/disneys-motion-principles-in-designing-interface-animations-9ac7707a2b43Links to an external site. [Accessed 28 March 2023]
- Heyning, E. (2017) ‘Mixing Realities for Collaborative Play’ [online], Medium, 6 March. Available at: https://medium.com/@amoration/mixing-realities-for-collaborative-play-1e7573ed8b55Links to an external site. [Accessed 28 March 2023]
- What is Interaction Design? [online] Available at: https://www.interaction-design.org/literature/topics/interaction-designLinks to an external site. [Accessed 28 March 2023]
The Design thinking playbook
Lewrick, M., Link, P. and Leifer, L., 2018. The design thinking playbook. Hoboken, New Jersey: John Wiley & Sons, Inc.