DECO1400 Lecture 3

Personas

Why are Personas Important?

Benefits of Personas in UX Design

  1. Build Empathy: Personas help designers create understanding and empathy with the end-users. Thanks to personas, designers can:
    • Gain a perspective similar to the user. Creating user personas can help designers to step out of themselves and recognise that different people have different needs and expectations
    • Identify with the user they are designing for
  2. Provide Direction for making design decisions User personas help designers shape product strategy and accompany during the usability testing sessions
    • A deep understanding of user behaviour and needs makes it possible to define who a product is being created for, and what is necessary or unnecessary for them from a user-centred point of view.
    • This allows product teams to prioritise feature requests (for example, features could be prioritised based on how well they address the needs of a primary persona)
    • They can also help settle arguments around design decisions - instead of saying, "I think the send button is too small", a designer might say, "Since our primary persona, Carolyn always uses a mobile device on the go, we need to design better tap targets in our app to minimise the interaction cost"
  3. Communicate Research Findings Most designers work in multidisciplinary teams that have members with varying expertise, experience and points of view
    • All team members should be on the same page in terms of design decisions
    • Person,as encapsulate the most critical information about users in a way that all team members and stakeholders can understand and relate to

The sum of efforts, both mental and physical that users must deploy in interacting with a site in order to reach their goals ((NNGroup.com)[https://www.nngroup.com/articles/interaction-cost-definition/])

Characteristics of a Good Persona

  1. Personas aren’t fictional guesses at what a target user thinks. Every aspect of a persona’s description should be tied back to real data (observed and researched).
  2. Personas reflect real user patterns, not different user roles. Personas aren’t a reflection of roles within a system.
  3. A persona focuses on the current state (how users interact with a product), not the future (how users will interact with a product).
  4. A persona is context-specific (it’s focused on the behaviors and goals related to the specific domain of a product)

Creating User Personas in the Design Process

Designers often start creating personas during the second phase of development, the Define phase.

  1. Empathise
  2. Define
  3. Ideate
  4. Prototype
  5. Test
  6. Implement More information at nngroup.com

How to Collect Information

Figure 1 - The design of an interface changes depending on the target demographic (left) interface for children (right) interface for adults.

CSS Basics

Separation of Markup and Style

Adding CSS to a Website

There are three key methods for adding styles to a website:

  1. Declared inline with the HTML

    <p style="color: red;"> Test Paragraph </p>
    • This uses the style attribute
    • Semi-colon delimited list
    • Use only where absolutely necessary

  2. Internal stylesheets embedded into <head> element, within <style> tags:

    <head>
    <title> Page Title </title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
    • Try not to use this method

  3. Styles stored in an external .css file, via <link> in <head> element.

    <head>
    <title> Page Title </title>
    <link rel="stylesheet" href="style.css">
</head>
    • All of the styling is kept in a limited number of stylesheets
    • Easier to edit 1 CSS file, than 400 HTML files
    • Saves page loading time
    • CSS file is cached on first load, and reused
    • HTML files are smaller as a consequence
    • Different files can be used for different outputs, such as Screen, print, braille etc.

CSS Syntax and Structure

Selector + Style Declarations

h1 {
    color: blue;
    font-size: 12px;
}

/* Style for 2nd Level Heading */
h2 {
    color: #ff8a4f;
    font-size: 24px;
}

Comments in CSS

CSS Inheritance

<body>
    <h2>Inheritance Example</h2>
    <p> 
        Some text here, 
        <em>blah</em>,
        blah, blah.
        <a href="#"> blah </a>
    </p>
</body>

Colors on the Web

Common Colour Properties

Common Text Properties

HTML Attributes


Types of Images

Hyperlinks

Anchors

Absolute vs Relative Paths

Measurements in CSS