Links

Week 6: User Scenarios

Summary

This weeks lecture pod presents a brief introduction to user scenarios through the provision of an example of a user persona being applied to a user scenario.

A user scenario visually outlines a typical storyline of a persona and how they approach and navigate through your website. Performing this process allows the designer to distinguish how the user will behave and what they will expect when attempting to achieve a goal on your site. This will provide the designer with the opportunity to test the site structure and identify problems and later solve them prior to publication.

The questions, ‘who’, ‘what’, ‘when’, ‘where’, ‘why’ and ‘how’ in regards to usage must be considered and exhibited when mapping out user scenarios.

Screen Shot 2017-05-08 at 9.24.45 AMWaterson, S. (2016, February). GDIDMPOD06 [Video Podcast Recording]. Retrieved from https://vimeo.com/159662636

A user scenario example of a customer attempting to order flowers on a website:

Screen Shot 2017-05-08 at 9.25.17 AM

Waterson, S. (2016, February). GDIDMPOD06 [Video Podcast Recording]. Retrieved from https://vimeo.com/159662636

A thorough example of a user scenario is displayed, describing Angela’s use of a PDA airport guide. After developing a user persona the designer will create a plausible scenarios to explore the interactions they will have with the product. Angela’s scenario specifically, is outlined below.

Screen Shot 2017-05-08 at 9.25.43 AMWaterson, S. (2016, February). GDIDMPOD06 [Video Podcast Recording]. Retrieved from https://vimeo.com/159662636

The scenario was then broken down into the following steps:

  1. Finds her favourite coffee shop in the list
  2. Airport guide provides directions to destination
  3. User follows directions given, successfully finds the shop and orders a latte
  4. Angela needs to find her way back to the gate. She looks up the number of her gate and follows directions given
  5. Arrives at gate with time to spare

As a response to this study, the designers will have to strategise functions to satisfy Angela’s goals, consider how she will use them and how they should be prioritised within the interface. In conclusion, the designers gathered that Angela will need the simplest user interface design in order to complete her task as quickly as possible with ease.

Reflection

I believe that it is essential to create individual user personas for our projects as it provides an insight to our audience’s perspective and how they approach certain functions within our interface. When creating a scenario for these potential personas, we are outlining the situations users will face when navigating through our sites and the troubles they may encounter. This exercise can be very beneficial as it is used to identify and eliminate or add features within our websites to create optimal experiences for the user.

The user scenario’s created prior to publication is a helpful mechanism to guide decisions and best conform to the target audience and their needs.

Week 5: Personas

Summary

This weeks lecture pod provided an in depth overview of the interactive media design process.

Throughout the user experience documentation process, the designer must consider developing user personas. In order to best inform and validate our designs and user experience, it can be very insightful to create fictional users to represent real users.

These user personas represent the goals and behaviour of a hypothesised group of users. Data collected from interviews with users can then be used to construct personas.

Alan Cooper, who developed the concept of personas recommends that softwares are to be designed for single archetypal users, as stated within his book, ‘The Inmates Are Running the Asylum’.

Fictional details personas usually exhibit include the following:

Screen Shot 2017-05-08 at 9.07.13 AM

Waterson, S. (2016). GDIDMPOD05 [Video file]. Retrieved from vimeo.com/159653223

The use of creating a persona outlining the subcategories shown above will aid the designer through configuring their projects whilst having a clear and specific vision of their users and their expectations in mind. This also allows the designer to initiate the crystallisation of the task definition and gathering of requirements. Furthermore, the user personas created can be later referenced when ensuring that the design is accommodating and meeting the users goal.

Designers must consider the size of their audience, as it can be an influential mechanism when attempting to conform your product to your specific audience. Typical audience sizes can range from large to small.

Large

Universal designers such as ‘Ebay’ may have difficulties when developing user personas.

It can be helpful to identify their:

  • core audience – focus on satisfying this audience
  • fringe audience

Small

When creating personas for small audiences such as ‘Dora the Explorer’, the designer is given the opportunity to become more specific with their audience personas. Utilising research will allow the designer to gain insights and help identify intricacies of their users.

If given the opportunity, getting feedback from users will inform and guide your persona development in order to confirm or deny any suspicions the designer has about their user base. This can illuminate new ideas that were not initially consider and further define your personas and utilise your design to create an optimal experience.

When developing personas, one must answer the questions:

    • Are there different tasks for different personas?
    • Are the tasks you’re designing for matching with the user base your personas represent?
    • Is what we’re designing for the middle, beginning or end of their task paths?
    • What devises are your personas likely to use?
            • Are they expecting a cross platform experience? (‘meet the users where they are’)
            • e.g. mobile use will be very high for users in their 20s

The designs being created will heavily rely on the project motives and what the product’s content is dependent on:

    • task dependent: design for a discovery or specific path
    • user dependent: design for both/combination of task development and user dependent
          • likely means that you need to design for both (user dependent and task dependent)
          • this is why most sites have you browse and search to accomodate large audiences

Mental Models

Mental models online the thoughts people form around an idea or activity, often illustrating how users approach a particular problem. It can also function as a guide to the interaction patterns being utilised.

      • e.g. taking a note
            • 16yo : using a smartphone
            • elderly : using post it note

These models are most constructive when included as a part of the user persona as it centralises these details throughout the design processes. After completion of the design, one is also able to employ this information as a form of reassurance in regards to flow and if it accommodates to the mental model of the users.

Artefact Persona

Artefact personas are most useful for client meetings where often the discussion collapses into subjective assertion (e.g. ‘I don’t like red’). In order to avoid this potential set back one can develop a personality for their project and permit an objective analysis.   

To develop an artefact persona, you would ask product personality questions, such as the following:

Screen Shot 2017-05-08 at 9.07.47 AMWaterson, S. (2016). GDIDMPOD05 [Video file]. Retrieved from vimeo.com/159653223

An example of a process for developing your product or artefact persona:

Screen Shot 2017-05-08 at 9.08.23 AM

Waterson, S. (2016). GDIDMPOD05 [Video file]. Retrieved from vimeo.com/159653223

This diagram exhibits the identification and use of experience keywords. The process consists of listing descriptive words or concepts that reoccur during stakeholder and user interviews. Groupings of these words and later selecting keywords that would be used to describe a person simplifies the design process as the users will be able to relate to the design more personally. 

The study conducted above, concluded the finding that users were more likely to accept the product if it had a similar personality to that of a visiting nurse.

Thus, this useful information allowed them to shape a visual appearance that presented itself as caring, conscientious and trustworthy throughout tone and style.

An experience keyword is therefore described as the initial 5 second emotional reaction and what the archetypal persona should feel when viewing the interface.

Screen Shot 2017-05-08 at 9.08.06 AM

Waterson, S. (2016). GDIDMPOD05 [Video file]. Retrieved from vimeo.com/159653223

The list was further refined and listed additional words that support each keyword to clarify its meaning. These keywords will suggest strong directions and govern visual strategy.

Reflection

In response, I believe that the process of developing user personas and scenarios should be one of the initial steps taken throughout the design process, driving the orientation of the process upwards. If these personas and scenarios are not identified, the designer can be confronted with copious amounts of extra time which could have been avoided.

Week 4: Instructional Design

Summary

In this lecture pod, Leon Cmielewski explains the fundamentals of instructional design whilst pointing out effective and ineffective examples of such. He outlines that instructional design is how to “do something” or to explain “how something works. While we interact with instructions constantly through our daily life (using a ticket machine, parking meter, operating domestic appliances), we can typically encounter poorly designed instructions which can create frustrating experiences for the user. An example of this can be one that involves the “split-attention effect” such as an instruction manual on how to fix the power steering of a truck. This instructional design can be deceptive as the user would have to remember too many things at once and hold lots of information in their working memory and then be able to marry together the text, supporting graphic as well as the legend.

Screen Shot 2017-05-08 at 8.57.20 AM

Cmielewski, L. (2016, February). GDIDMPOD04 [Video Podcast Recording]. Retrieved from https://vimeo.com/159662636

When designing effective instructions, it can be beneficial to consider the cognitive load theory. The cognitive load theory is based on both how we think and how we remember, and relating the outcomes of the research to the most effective ways to deliver instructions.

An example of an effective use of instructional design is the work that the “explainers” create for the healthcare and nursing sector. This company creates instructional designs for these people that have to deal with operating complex machine procedures and are constantly in need of updating their skills as technology advances.

Leon Cmielewski then goes on to display his views towards designs that display their instructions in the form of photographs. He explains that photography used throughout instructional graphics can typically be ineffective because often the material contains too much information to be useful due to the photo having too much detail allowing the salient points to be undefinable (every detail has an equal visual weight).

Cmielewski explains that symbol graphics is an effective alternative that can be utilised instead as the user is able to isolate the important details and are directed towards the most salient points to aid the understanding of what is being described.

Screen Shot 2017-05-08 at 8.58.46 AM

Cmielewski, L. (2016, February). GDIDMPOD04 [Video Podcast Recording]. Retrieved from https://vimeo.com/159662636

Alberto Cairo outlines the types of interaction for screen design:

  • Instruction – by clicking buttons
  • Conversation – back and forth dialog
  • Manipulation – drag and drop elements
  • Exploration – open, playful, game like

Challenges of a mobile phone:

  • Limited screen area
  • Limited resolution

Opportunities:

  • Time
  • Layering detail and information

Challenges when creating an instructional guide:

  • Your user’s preference
  • Redundancy
  • Sense of control

Reflection

In response to this lecture pod, I have realised the effective and ineffective design aspects of instructional design. A designer must employ a simplistic approach and concise wording when creating instructional graphics. They must consider their audience and avoid all potential risks of misinterpretation or uncertainty in response to their design. It can be useful to create a mechanism when creating these designs and allow the focal point to be easily distinguishable within each frame. I also gathered that it is most effective to utilise a design consisting of symbol graphics and colour coding in order to convey a direct message to all potential audiences. An efficient approach that can be utilised when attempting to ensure a successful and concise outcome is to view their own work through the eyes of their viewers and distinguish any faults that could cloud the intention of the design.

Week 3: Design Patterns

Summary

This week’s lecture pod focused on introducing screen design basics as well as design patterns for the screen.

Patterns are conventions that are developed in terms of user interface and page composition. It is essential to identify the differences in mobile, tablet, laptop and desktop screen design.

It is suggested that interactive designers initially start their designs for on small screen rather than a larger screen in order to prioritise, choose and alter our mental structure. This method is often referred to as a ‘mobile first’ approach. Therefore, starting by designing on a smaller screen is more effective rather than adapting a larger design to a smaller one.

Christopher Alexander outlines that design patters go beyond style and visual repetition and should be viewed as similar and reusable solutions that have a working function, often seen in interface and software design. He also depicts the fact that there are other methods of finding design solutions than patterns, and can sometimes be deceptive if used through indiscretion.

Examples of recent design patterns for screen: 

  1. The Hamburger Menu 

Screen Shot 2017-03-12 at 11.37.12 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • widespread and easily recognisable
  • consists of three parallel horizontal lines
  • used as a button in a graphical user interface
  • saves space on the screen

2. Account registration 

Screen Shot 2017-03-12 at 11.37.54 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • shows a form to fill out or a social account to sign up with 
  • reduced chunk of required fields to reduce friction and encourages users to flow through the process

3. Long Scroll

Screen Shot 2017-03-12 at 11.38.09 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • often utilised by sites that want to lure users through storytelling
  • can still mimic multipage sites by breaking the scroll into clear sections
  • it simplifies navigation
  • an example of this is the apple watch

4. Card Layouts 

Screen Shot 2017-03-12 at 11.38.27 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • presents information in bite sized chunks
  • suitable for scanning
  • is presented as miniature “content containers” or condensed web pages
  • their rectangular shape makes them easy to rearrange for different device screens

5. Hero Images 

Screen Shot 2017-03-12 at 11.39.02 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • high definition hero images are the fastest way to grab a user’s attention
  • compression codecs and advances in bandwidth have allowed users to no longer suffer from slow load times when processing these high definition images
  • a common layout when utilising this pattern includes a hero image above the scroll followed by either a zig-zagging section or a card spaced arrangement

6. Animation 

Screen Shot 2017-03-12 at 11.39.54 AM
Waterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • enhances a sites storytelling
  • makes the experience more interactive and entertaining
  • it’s essential that the chosen animation adds to the site’s story elements and personality
  • large-scale animation: parralax scrolling, gallery and slideshow, pop-up notifications)
  • small-scale animation: spinners, hover tools, loading bars

Below are some common animations used within websites:

Waterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

7. Material Design 

Screen Shot 2017-03-12 at 11.41.58 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • the goal is to create a clean design that will focus on the user experience
  • it has a lot in common with another growing trend; flat design (due to its minimalistic look)
  • uses depth and shadow in contrast to flat design

An example of material design:

– When google launched its new style language in 2015, they adapted shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user.

8. Responsive Design 

Screen Shot 2017-03-12 at 11.42.18 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • recently popular due to the rise of mobile internet usage
  • is a relatively simple and cheap way for a business to build a fully functional, mobile friendly website
  • common issues with responsive design can include performance
  • tends to be minimalistic
  • most suitable to work with card layouts

9. Flat Design 

Screen Shot 2017-03-12 at 6.19.47 PM.pngWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • is compatible with other trends such as minimalist design, responsive design and material design

Reflection 

This lecture has given me a different perspective and has expanded my knowledge on the different techniques of UI AND UX design.

Week 2: Process and Context

Summary

Part 1: Design Process Overview 

In order to effectively comprehend the meaning of ‘context’, it is useful for one to have an understanding of the design process. Verplank outlines that this process contains eight phases, ranging from the initial invent stages to the representation phase which can later on be manipulated.

verplank week2.pngWaterson, S. (2016, February). GDIDMPOD02 [Video Podcast Recording]. Retrieved from https://vimeo.com/159662636

There is a vast array of tools and techniques in which interactive designers can utilise to assist them in ‘generating and identifying potential solutions’. This includes, applying skills and selecting tools based on the problems that that to be solved and the solution that needs to be communicated.

Designers typically rule out their initial ideas and designs with the use of low tech methods, such as using a pencil and paper, sticky notes or a white board in order to define and frame the problem. In order to identify potential direction, missing information and the most appropriate solutions, it can be useful to incorporate the use of flowcharts, diagrams and models throughout the developmental stages.

When gathering information to help us generate ideas and make decisions, we can utilise the following useful techniques: precedent research (studying recent products), observe people,  ask questions based on those observations and test prototypes.

Part 2: Context

This lecture pod also introduced the concept of ‘context’. This includes, the context of use and the context for use.

part-2 context.png

Waterson, S. (2016, February). GDIDMPOD02 [Video Podcast Recording]. Retrieved from https://vimeo.com/159662636

For example:

  • One might log into their bank account on their laptop to check their balance and confirm transactions from home
  • One might log into their bank account through an app on their phone, at the supermarket to check if they have sufficient funds

We can use context scenarios like the above to identify the specific needs for people, in order to create interaction designs that will facilitate their behaviour.

i.e. a context scenario is a story about the use.

There are many questions to be asked to help us create context scenarios. Such as:

  • What is the situation?
  • What’s the setting or environment in which the interface or the device will be used?
  • Is it public or private?
  • Is it conducive?
  • Who will be using the device or interface?
  • Will it be used by one person, or multiple people?
  • How long will the interface be used?
  • Will the person be able to focus on their task, or will they be interrupted by using it?
  • Does the experience need to be extremely simple?
  • How much complexity can be accepted?

Reflection

I believe that in order to create a successful interactive design, one must consider the design process in conjunction with context. The interactive designer must apply low tech tools to efficiently create a basis which would effectively allow them to identify areas for improvement during the developmental stages of the design. An interactive designer must consider context scenarios in relation to their product in order to ensure all potential areas of the consumer’s needs are met. It is only through this process that a designer can fully understand its audience and adapt or manipulate its product in relation to how their market reacts. The design process is a useful mechanism for designers not only to identify insightful solutions, but to engage with their audience and appropriate their product to best gratify their desires.