Lecture notes

Week 7: UI visual design patterns

Response to week 7 lecture pod

To fully understand UX and UI patterns, they are an essential term in producing interactive products such as website and app. Both of them are crucial to a product and work closely together as one to visualise the presentation, senses and reaction. 

UX (user experience)

It is the first design process for interactive products to enhance the customer’s experience when observing how they react to it. It aims to improve the usability and functionality provided in the interaction between the customer and the product. For example, researchers or designers in the UI/UX field relies on the element of creating:

  • User persona: create your own character related to your product 
  • User Scenario: Analysing how your persona act out when interacting with your product based on personalities, likes, dislikes and hobbies
  • Usability testing: ask questions and feedback on your product from the peer, professor, client or customer
  • Wireframe: A visual guide for your website or app to represent your skeletal framework and to demonstrate your development and plan of the layout 
UI (user interface)

In this stage, it means that your interactive product such as a website or app has been designed in term of look and feel. It also showcases the final presentation of the product and focuses on interactivity, responsiveness and efficient experience. Therefore, It allows for the user to gain an understanding of how your interactive product benefits daily lives and to help them seek content to complete their goals.

Example of my UI design 

These are my final UI screen designs are for showcasing my intention of creating an informative website about ocean plastic pollution and how it tied to the arising event of climate change. I have also created my own branding in order to value the marine life in the ocean and the aims to deal with plastic pollution as an environmental community. 

Home page
About page

User Scenario

Respond to week 6 lecture pod & Tutorial activities

Definition

It is defined as a fictitious story of a user’s goals of interacting with interactive products such as a website or app. It played a major role in describing the type of users and their daily activities interacting with a website/application to collect information about: 

  • Goals
  • Expectations
  • Motivations
  • Action 
  • Reactions

The important aspect

After writing your narrative about your day of your life of a user interacting with your product, it is essential as a digital designer to understand what the future users seek. If the users fail to complete their goals by interacting with your product, it will give you further insight into your problem so it is understandable and easily be solved. 

Example of user scenarios

Basic diagram

Website-User-scenario-workflow. (n.d.). Retrieved from https://www.parachutedigitalmarketing.com.au/blog/the-online-user-experience/planning-your-website-for-the-best-possible-user-experience/attachment/website-user-scenario-
workflow/

Visual diagram

What Does a UX Designer Actually Do? (2018, October 31). Retrieved from https://theblog.adobe.com/what-does-a-ux-designer-actually-do/

Tutorial activity: Write up 2 quick Scenarios for your project.

User 1: expert

It is on a Monday morning and Victoria is at home working as an environmental strategist to complete daily tasks and suddenly, she has received an urgent email from a global environmental company to work with them about getting rid of plastic pollution in the ocean. She replied back to states that she will come up with varieties of strategies with intensive research to guide her ideas of benefiting and improving on the marine life. 

Although Victoria is a major expert in providing strategies to benefit the environment around the world, she still needed to conduct research for marine plastic pollution and came across a website that demonstrates how the company invented a clean up specifically for the marine life in the ocean. This website is passionate about inventing technologies and designer products made for cleaning up the ocean to enable that the marine animals are safe to live and maintain a great ecosystem for us. 

After weeks of conducting research to provide strategies to save the marine life from plastic pollution, Victoria was told that she needed to book a flight to the US and work with the environmental company who urgently needed her help and improve on the ocean clean up for the marine life. 

User 2: Novice

On a Friday evening, Elena has her uni assignment due tonight at midnight to complete it. She was tasked to research marine plastic pollution and how is it affecting the marine animals living in the ocean. She also has to apply her internship and volunteering experience of how she brainstorm ideas and solutions of saving the animal from ingesting plastic particles. 

Starting on her assignment, she came across this ocean website that is relatable to her chosen topics focuses on marine plastic pollution and the negative impact on marine life. She absorbed the information that briefly explains the process of cleaning the rubbish dumping up from the ocean. 

In the end, her outcome from using this interactive website about ocean plastic pollution and the negative impact on marine life has helped her to further expand her knowledge and passion of saving the animal from plastic pollution. 

User Personas

Responds to week 5 lecture pod

Definition

User personas is the representative of your users that is vital to developing a interactive product. They will help you to describe the audiences who use your product and enable you to efficiently identify and communicate their needs.

The most important aspect of user personas

Before creating your own personas for your interactive products, it is crucial that you fully understand your target audience. The essential of creating your own personas is to identify:

  • Goals
  • Behaviour patterns (How they reacts using the product)
  • Attitude, skills and enivronment
  • What platform they prefer to use and interact it on? (Desktop, tablet or mobile)

To further expand the understanding and insight of your interactive products, it is useful to question the users based on:

  • Personalities/attitudes (what type of a person is or how they reacts)
  • Likes
  • Dislikes
  • Interest/hobbies

Further questioning your users will give you more insight into how they approach your products so you can design a better experience to give them what they need.

My example of user persona for my project

My 1st user persona created from Zumio
2nd user persona created from Zumio

Week 4 Lecture pod

Instructional Design

Definition

It is a design process that involves learning and knowledge to develop and design an interactive product. Instructional design is created in many elements- words/language, graphic images and photography. 

Example of visual introduction

A simple, visual images that are word/language free for furniture or other designer products so the process runs smoothly. 

Assembly instructions: assisting the non-visual IKEA customers. (n.d.). Retrieved from https://extemporeapp.com/assembly-instructions-assisting-the-non-visual-ikea-customers/



The National Asthma Council Australia. (n.d.). Retrieved from https://www.nationalasthma.org.au/living-with-asthma/resources/patients-carers/charts/first-aid-for-asthma-chart

Health departments (clinics and hospitals)

In many health departments, it is critical that designers/researchers produce graphic images and brief word introduction with a long process of researching. Colour, layout, graphics and typography is still very important for readability and special needs such as impaired people who have poor eyesight. For example, the colour red at the top indicates the critical steps of reliving a person who shows the first sign of asthma. Therefore for green at the bottom, it shows the detailed introduction of how to use the inhaler without needing emergency help.

Design Patterns

Responds to Week 3 lecture pod

Definition

Design patterns are the differentiation of form for design solutions in interactive/interaction design. It was mainly introduced by an architect Christopher Alexander, who argued that pattern language allows the arrangement of the physical environment in relation to effectively solve the problem presented (C.Alexander et al, A Pattern Language, p.xv). His perspective of solving design solutions are defined with questioning: 

  • Does it occur and felt in the way we have described it and the solution? 
  • Does the arrangement we propose in fact resolve the problem? 
  • Depend on what type of problems to be solved? 

Examples

The examples down below are the design patterns which I thought is very important and essential to interactive/interaction design.

The hamburger menu:


Apptimize. (2018, May 4). The Ultimate Guide to the Hamburger Menu and Its Alternatives. Retrieved from https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db
  • It is a interactive button that organises your categories such as menus, pages or options in desktop, tablet and mobile version
  • It usually is displayed on the top left for functionality, save space for eye comforting and is user friendly

Account registration

How to register for an account at beckman.com. (n.d.). Retrieved from https://www.beckman.com/support/my-account/register
  • It is a form to fill out your detail of your name, sign up for newsletter, gain benefit (sales, voucher, point) etc
  • Help you guide through the process quicker and smoothly

Hero images

7 CSS tips to add some WOW to your hero image. (2016, October 11). Retrieved from https://www.csshero.org/7-css-tips-add-wow-hero-image/
  • A effective and fastest way to grab the user’s attention
  • It can be in animated videos to showcase the storytelling further and the emphasis on the theme and the environment
  • It is important that under consideration whether if it is suitable for the particular topic and the target audience
  • It can have a strong impact on the users in term of effect and parallel to caught their attention

To conclude, it is suggested and clear that these design patterns follow the design trend yearly to support people’s abilities to interact with technologies and interactive products.

Process & Content in Interaction Design

Response to Week 2 lecture pod

Design processes in interaction or interactive designs are essential for testing and producing digital products to support today’s societies. It is very important for designers and researchers to develop their products involved in many processes to achieve the desired goals for the user to experience it successfully.

This is a new and modern way of the design process. It will give the designers a more streamlined approach of producing products for their clients to have the best user experience (Zurb, n.d). 

Upon preparing for the prototype, it is very important to take this process considering: what people are trying to do, how they may try to do it, what gets in the way or helps and where they might be doing it. For example, to confirm the transaction or see if you had enough money to spent, you log into your bank account in your phone or any ATM machine with protected security such as password, fingerprint ID or face ID to open it. It is apparently useful for those who are out shopping or in certain situations where they needed to spend. 

ZURB — Product Design, Interaction Design & Design Strategy. (n.d.). Retrieved from https://zurb.com/word/design-process
Putting Personas to Work in UX Design: What They Are and Why They’re Important. (2018, February 21). Retrieved from https://theblog.adobe.com/putting-personas-to-work-in-ux-design-what-they-are-and-why-theyre-important/

Another essential part of this process is to states your target audience and ask someone to be your persona so they take part in the user experience with your prototype. They can help you with decision-making by understanding the client’s point of view on this prototype to allow your design process to run smoothly and finalising it.

The Power of Interaction Design

Week 1 lecture pod summary and reflection

What is interaction design in my own perspective?

It is a complex process in designing interactive products to allows the interaction between people and technologies such as the app, website, mobile and tablet. Both designers and researchers used this method of interaction design to create products that enable the users used it to achieve their goals. 

Summary and reflection

My lecture pod talks about Bill Verplank, who is an experienced UX designer, he discussed the step-by-step of brainstorming, planning and testing process of creating interactive products. User experience is also important that it shows how it interacts with the world and support people’s everyday lives. He stated that creating interactive products has three questions: 

  • How do you know?
  • How do you do?
  • How do you feel?
Roesler, A. Interaction Design [Drawing map]. Retrieved March 10th, 2019 from https://blogs.uw.edu/hcde/2009/04/27/summer-class-art-383-fundamentals-of-interaction-design/

Interactivity is another one of the most important design processes in interaction design. It involves many steps to gain feedback, control, creativity/co-creativity, communications and adaptivity to successfully launch the users’ products out to the societies.