UI Visual Design Patterns

User Interface design is not all about graphic design but is about presenting the user with the right tools to accomplish their goals. Therefore it is important to balance aesthetics with usability and ensure that UI is used to heighten UX. This is where design patterns come in, design patterns provide design solutions for effective layout design and can increase usability within a design.

What are design patterns?

Design patterns are common design solutions that are used throughout a variety of interfaces, they are quite common to users and due to this they intuitively know how to navigate an interface.

Examples of design patterns

Tabs

Tabs are an example of skeuomorphism (The design of something that represents something in the real world e.g tabs represent physical tabs used in physical filing systems). Through the use of skeuomorphism and the mass use of tabs across most interfaces this design pattern allows users to navigate with ease and without confusion therefore aiding to a successful interface design.

 

timthumb.php

[Launchmind tabs example]. (n.d.). Retrieved May 8, 2017, from http://inspirationti.me/websites/tabs

Menus

Menus are another example of visual design patterns, they are used to organise information and present information clearly to the user. Dropdown menus can be used to create hierarchal organisation whilst drawer menus save space and can be used to create clean and simple designs. Hamburger menus are most commonly used in app design or responsive design for tablets and phones, they save space and declutter the interface for the user.

Search bars

Search bars are a nice feature to include in a header or a nav bar as they allow users to search what they are looking for without navigating their way all through the interface. Search bars with dropdown options are useful shortcuts, they shorten the users path and saves the user time therefore creating a better user experience.

Big Footer

Another design pattern that creates shortcuts for the user are big footers, this pattern is used quite commonly throughout interfaces and is used to hold links to important pages, therefore can shorten the users path to their destination.

Carousel

Carousels are quite common when a user needs to browse through lots of options. Carousels can be seen on portfolio websites and are also quite common on online stores to create look books or advertise multiple products at once.

 

disney

Disney Carousel [Digital image]. (2014, September 12). Retrieved May 8, 2017, from https://www.imarc.com/blog/content-carousels-2014

Most important idea from this pod

User design patterns are good solutions for design problems due to the fact that they are proven to work and the users can intuitively navigate the interface when patterns are used.

 

User Scenarios

Lecture pod 6 explores user scenarios and their contribution to the overall success of a project. User scenarios are used in conjunction with personas as explored in lecture pod 5 to completely understand the user’s therefore the design can be tailored to an audience and purpose specifically.

What is a user scenario?

User scenarios are simply scenarios that a designer places their user in, a scenario is a narrative or situation. User scenarios are stories created to achieve a goal, e.g. Dave wants to know why his toaster is working properly so he navigates to the troubleshooting page on ‘how to make toast.com’. User scenarios can include goals, expectations, motivations actions and reactions essentially they need to be a story around use.

Why are user scenarios important?

User scenarios are important as they drive the design of a project e.g If Dave is looking for the troubleshooting page on ‘how to make toast.com’ it should be easy to navigate to on the website and therefore the designer should come up with a design solution to help Dave achieve his goal with ease. With the use of multiple user scenarios a design can be created to include UX for the masses, this will ensure that everyone who reaches a website or an app that has been designed with many users in mind will successfully complete their goals and have a seamless and enjoyable experience.

Most important idea from this pod

It is very important to create user scenarios as they drive the design of the interface and the use of these scenarios is critical to the success of an interface design.

User and Artefact Personas

Lecture pod 5 explores user personas and how they aid in creating a successful design along with exploring how artefact personas can aid the design process and impact the overall feel of the design.

User Personas

A user persona is a fictional user that represents a real user and their aims. There can be more than just a primary persona, a designer should create a core user and a fringe user, by doing so they can mainly cater to the core user but also include the fringe user in their design decisions.  Through creating user personas a designer can design with specific goals and ensure that their target audience is engaged with the content and explore the content with ease. They can create a mental model to put themselves in the persona’s position and consider what the persona wants to do when they interact with the design. This allows the designer to determine whether the flow of the interaction is suited to the core user.

Below is an example of a user persona:

 

ExPersona_Jill

[Jill Anderson user persona]. (n.d.). Retrieved May 7, 2017, from http://www.keepitusable.com/blog/?tag=persona

Creating a user persona

When creating a user persona it is important to consider the following:

  • Persona’s goals
  • Persona’s behaviour
  • Persona’s environment
  • Persona’s lifestyle
  • Persona’s past experiences

Artefact Personas

An artefact persona is the personality of the interaction, through creating an artefact persona a design will have a more cohesive and effective look and feel. To create an artefact persona list key words to determine the design strategy and then narrow these words to a select few that represent the interaction. From here a mood board can be made and there is a base in which design decisions can be derived from purposefully.

Most important idea from this pod

The most important idea to take away from this lecture pod is to use both user and artefact personas to orientate a design, as in doing so a design will be more effective, cohesive and successful.

Instructional design

Lecture pod 4 explores instructional design and how this relates to and impacts interactive design. When using interactive design to instruct a user the interactive will be more effective if principles of instructional design are applied as this creates an easy experience for the user.

When designing instructions it is important to keep the instruction simplified and to not overload the user’s memory. Keeping instructions simplified is important as it allows for isolation of key elements and therefore does not confuse the user with unnecessary elements e.g. a photo of a step has a lot of information and is harder to interpret.  Another thing to keep in mind when designing instructions is to not overload the user’s memory e.g if legends are used or the user has to refer to a separate image they must remember multiple elements to gain a sense of understanding of the instruction. A way in which this memory overload can be avoided is simplifying and keeping relevant information together e.g. keep images close to the relevant text.

 

Screen Shot 2016-09-27 at 10.41.04 pm

Instructional design I have created illustrating how to make origami balloons 

 

Most important idea from this pod

Creating instructional design through interactive media does have its limitations such as screen size and screen resolution but the way in which it offers layers and time interaction creates endless opportunities.

Design Patterns

Lecture pod 3 explores design patterns that are used throughout interactive content. A design pattern is a solution that designers can use in multiple situations to solve a design problem. Design solutions are useful to designers as they have been pre designed and they have previously been successful and therefore can offer the designer success in their own work. However there are some downfalls to using design patterns, it can lead to many websites and other digital media looking the same and therefore it can be harder for designs to stand out.

Pattern examples include:

  • Hamburger menus
  • Account registrations
  • Long scroll
  • Card layouts (most commonly associated with Pinterest)
  • Hero images
  • Animation
  • Material design
  • Responsive design
  • Flat design

 

flat-web-design-9

Faisal, M. (n.d.). We Heart Trees [Example of flat design from We Heart Trees]. Retrieved May 7, 2017, from http://graphicdesignjunction.com/2013/08/flat-webite-design/

Most important idea from this pod

Design patterns are good to take inspiration from as they have been proven successful however they are not a “one size fits all” it is important to make sure that the design pattern works well for the content and context you are designing for.

Process and Context

Lecture pod 2 explores the process of creating an interaction and how important it is to understand the context in which users will use the interaction.

Process

When creating an interaction it is important to start with low tech methods e.g. pen and paper. By sketching out ideas, writing out descriptions and creating flow charts it is easy to completely understand the activity or problem that you are designing an interaction for. Once you have completely understood the issue and explored ideas through pen and paper then it is necessary to use more high tech methods to fill in all the details and work towards creating the final product.

Bill Verplank’s 8 step process

Bill Verplank approaches an interaction design process within 8 steps as illustrated below.

process

[Bill Verplank’s interaction design process]. (n.d.). Retrieved from http://www.billverplank.com/Lecture/

Context

To design successful interactions it is important to fully understand the context of which they will be used in. To gain this knowledge many questions should be asked and scenarios in which people will use the interaction should be created. There are many different questions a designer should be asking, such questions include:

  • What are people trying to do?
  • How are they trying to do it?
  • What gets in the way or helps?
  • Where they might be doing it?

Most important idea from this pod

When designing an interaction it is important to follow a good process that involves a lot of planning, thinking, researching, looking at precedents and exploring the context of an interaction. Without these things an interaction will not be as successful as the designer would not have put in the proper time to learn and explore their ideas to their full potential.

 

 

What is Interaction Design?

Lecture pod 1 introduces interaction design and explores the basics of interaction and interactivity. This pod defines the term interaction and covers aspects of interaction design from what designers need to consider when designing interactions and how important interaction design is. The pod explores some of these aspects with interviews from well known designers, Bill Verplank and Gillian Crampton Smith.

What is Interaction and Interaction Design?

Interaction design crosses over with a wide range of disciplines including graphic design therefore as designers it is important to gain a good understanding on the role interaction design plays and what interaction design is. To completely understand what interaction design is, it is important to first understand what interaction is. Interaction is anything that we engage with, this can include people, books, technology and basically any form of media. Essentially interaction design is the design of interactive products that support people in their everyday lives. According to Gillian Crampton Smith interview in Bill Moggridge’s ‘Designing Interactions’ (2007) “Interaction design involves designing the behaviour and quality of something that is interactive”.

What to consider when designing interactions

According to Bill Verplank you should always ask three questions when you are designing interactions:

  • How do you feel?
  • How do you do?
  • How do you know?

These questions allow the designer to step into the users position and therefore gain a better understanding of how to design for the user e.g. how does the user do a certain action? Do they need to press a particular button? Do they need to tap somewhere on the screen? Concluding from Bill Verplank’s interview and the lecture pod as a whole, to design interactions a designer must focus on designing for people and design interactions for the experience of others.

Image right – S, C. (n.d.). [Bill draws as he talks for his interview in 2001. Photo Craig Syverson]. Retrieved February 24, 2017, from  http://www.designinginteractions.com/interviews/BillVerplank

Image left – [Bill Verplank’s explanation of interaction design]. (2015, March 4). Retrieved February 26, 2017, from https://thenextweb.com/dd/2015/03/03/the-5-pillars-of-interaction-design/#.tnw_QQnlQQny

Most important idea from this pod

Interaction design is infused into our everyday lives so it is important for designers to understand interaction design as a whole and most importantly a designer must understand people and their experiences to create effective designs.