IAT-334: 02 Aesthetic Affordances

Aesthetic Affordances

Lecture outline

In this week's lecture we will talk about design affordances, aesthetics, and how to begin approaching the design of interactions.

Access Makeathon

Aesthetic Affordances

Considerating aesthetics & behaviour

Close all laptops please! (Back row is excluded)

A UI Sketch for login screens
Where is the user more or less clearly cued to what they are expected to input? Why?
A UI Sketch for login screens
How required is login to use the app in these two sketches? Why?
A UI Sketch for login screens
Why might previewing a user's photo or merging the form-fields on submission be a concern?
A UI Sketch for login screens
How might the user interpret this interaction? Why?

Behaviours & Interactions

Interfaces are dynamic. They are the means by which a user controls and interacts with a complex tool. As a result it is important that we understand the capabilities and behaviours of the product and the user.

User and System Behaviours

As interface designers we have to reconcile user expectations and system functions. Note that our job is not to map them directly.

Interactive System Models

Implementation A complex set of code

Representational A wireframe of a login screen

Mental A user trying to remember their password

Skeuomorphism

The use of physical, visual, and conceptual represetations that resemble or mimic older, typically physical, elements in order to make them more easily understood, recognized and adopted by a user.

The iBooks application UI; looking very three dimensional
A book organizing application that looks like a bookcase.
The Candy Crush game UI presenting a skeuomorphic approach
Candies that look like candies might sitting out on a (very organized) table.

Don't Hate, Consider-it!

While skeuomorphism may not currently be considered 'trendy', the benefits in usability from using older technological cues should not be mocked!

The Windows XP interface
Note: Do not connect to internet.
The Windows 10 interface
The iOS interface's evolution over time

Design Languages

Visual languages such as Material Design, Apple Design Guidelines, Windows Tiles (etc) are pattern libraries of visual and interaction elements. These standardize interactions within a given platform, allowing for branding an extendability.

What is an 'intuitive' interface?

Break time!

Please return within ten minutes. Otherwise things will happen.

User Goals

Our design should be driven by our user's goals — a desired outcome or intended experience. The challenge is that a user's goals can span from well-defined to unintelligible.

Example: Find the nearest whisky jack.

A grey jay (or whisky jack) looking out from a tree

Tasks and Goals

While our design is driven by the goals of our user, we will need to break up the goal(s) into a series of tasks to help us build the representational model needed.

According to Buley, what is a taskflow? What is its purpose?

P01: Mockups (IAT-334)

P01 User

While your first week likely considered a fictional user, your actual user for the final submission is us — your instructors.

P01 Narrative

Your next step is to show us a multi-linear and linked narrative of your social media site. This is meant to be a narrow slice of your interface, to help build a representational model for us (your instructors).

Designing Interactions

You will be working on how people are presented information, move through content, and use the interface you are making. Don't design in a vacuum. Look at existing systems and try to understand why they work the way they do. And how you can use that to make your own system function "intuitively."

Guiding Through Interaction

Consider:

P01: Suggested Steps

  1. Write out a narrative and map out how it fits together in a flow-chart.
  2. Quickly prototype any extra pages or interface elements as necessary.
  3. Build your interactive narrative using Axure and generate the prototype.
  4. Upload your interactive prototype to your SFU webspace.
  5. Test out your prototype on others to ensure that the narrative holds.

Draft a short narrative for using your UI.

You have three minutes.

A short narrative for using your UI.

Andrew wants to find the nearest whisky jack to snap some photos of. He opens up the Berdfinder social media app and decides how he might want to find them. Wanting to find the nearest one he chooses the map option. There he is able to put in his address and look around the map for the closest whisky jack sighting.

A short narrative for using your UI.

Andrew wants to find the nearest whisky jack (goal) to snap some photos of. He opens up the Berdfinder social media app and decides how he might want to find them (options). Wanting to find the nearest one he chooses the map option (decision). There he is able to put in his address (options?/decision) and look around the map for the closest whisky jack sighting.

A flowchart illustrating the decisions and stepping through an application
Stepping through the narrative in a flowchart.

Draft a flowchart for your narrative.

You have four minutes.

Flowchart Checks

Just the first step in a flowchart illustrating the decisions and stepping through an application
Wireframes illustrating the same decisions and stepping through an application

Flowchart Checks

Please take a photo of your sketch and submit it to ah1.ca/flow

Wireframes illustrating the same decisions and stepping through an application
Ensure we see each step of the interaction.

Any questions?

UI Sketchbook

Sketch #2

Sketch out three different methods of guiding a user through an account setup process. The screen sketches should:

In This Week's Labs...

You will receive some feedback on your work thus far, and spend a bit more time with Axure.

In Next Week's Lecture...

We will talk about users and how to begin considering them more in your designs.

Contacting Andrew

Options: