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.

UI Screen Designs

After having worked through descriptions, flowcharts, storyboarding and UI charts a design can be transferred from paper to screen.

Below is a mock up of my ‘Making Toast Interactive’, created using Adobe Illustrator.

First I created the grid and basic wire framing within the outlines of the media the interactive is designed for, in this case the iPad.

 

Screen Shot 2017-03-13 at 9.34.04 am

Basic wireframing for making toast interactive

 

Once the wire framing was in place I added in the main content.

How To Make Toast Ipad content

Making toast interface with main content

 

After the content had been added I created the interactive elements such as the buttons and the progress bar.

 

Screen Shot 2017-03-13 at 9.35.15 am

Making toast interactive with buttons and progress bar

 

 

The next layer in my illustrator file included the highlights, the highlights in this interaction occur when the user touches certain elements. This is illustrated bellow with a bold yellow.

 

Screen Shot 2017-03-13 at 12.10.41 pm

Making toast interactive with brighter yellow highlights

 

The last layer in my illustrated mock-up was a gestures layer, showing the gestures used to navigate through the content.

 

screen-shot-2017-03-13-at-9-35-59-am.png

Making toast interactive with gestures

 

Making Toast Mini Site

After creating a text description, flow chart and storyboard I continue to plan out my making toast interactive on paper through creating UI flow, a sitemap and sketching out an interface design.

UI flows

UI flows are useful in mapping out a user’s journey through an interactive and planning out how you will design the interactives navigation. Based on the storyboard I produced previously here is my making toast UI flow below, it features the buttons in the interface that the user clicks through to get through each step.

 

Making toast ui flow

UI flowchart for making toast

 

Extending content

After creating UI flows it is easier to see where you can extend the content of the interaction and therefore enhance the user’s experience. As shown below I have been able to extend the user’s experience by creating sections such as “What type of bread?”, “The toastiness scale”, “Topping ideas” and “Don’t like the result”. These sections can be accessed when the user reaches a corresponding step to the extended content.

 

extended ui flow

UI flowchart for making toast with extended content

 

Navigation and Sitemap

Once I completed the UI flow I was then able to create a list of primary and secondary navigational elements within the interface. The primary elements include the main elements that the user clicks through to find out how to make toast, whilst the secondary elements are the elements that users click through to reach extended content.

Primary Elements

  • Let’s Begin
  • Next
  • Back
  • Finish

Secondary Elements

  • What type of bread
  • The toastiness scale
  • Topping ideas
  • Don’t like the result

Listing the primary and secondary elements makes it easier to produce a sitemap as shown below.

 

Making toast sitemap

My sitemap for making toast

 

Interface Design

Once a sitemap is created an interface can be designed. As shown below I have created a sketch of my interface to map out where all my elements will be located and so I can have a clearer idea of what the interface will look like for the user.

 

Making toast interface design

My interface design for making toast

 

Whilst sketching out an interface design I was able to see areas of the interaction that could be improved e.g. I created a bar showing the user where they were up to in the process of making toast.

After planning out all these steps on paper I have gained a better understanding of what the interaction will look like and how it will work and therefore I am then ready to move on to create a digital mock up.

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.