In this week's lecture we will talk about design affordances, aesthetics, and how to begin approaching the design of interactions.
Considerating aesthetics & behaviour
Close all laptops please! (Back row is excluded)
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
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.
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!
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?
Please return within ten minutes. Otherwise things will happen.
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.
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?
While your first week likely considered a fictional user, your actual user for the final submission is us — your instructors.
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).
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
- How do you focus the attention of the user?
- How do you ensure your users don't get lost?
- How is the logic of the site conveyed/represented?
P01: Suggested Steps
- Write out a narrative and map out how it fits together in a flow-chart.
- Quickly prototype any extra pages or interface elements as necessary.
- Build your interactive narrative using Axure and generate the prototype.
- Upload your interactive prototype to your SFU webspace.
- 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.
Draft a flowchart for your narrative.
You have four minutes.
Please take a photo of your sketch and submit it to ah1.ca/flow
Sketch out three different methods of guiding a user through an account setup process. The screen sketches should:
- Include the creation of a username and password.
- Be sketched as if being viewed on a smartwatch.
- Be for the same app.
- Not be for an existing app.
- Include annotations for interactions performed by the user.
- Be understandable/readable by others then yourself.
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.
- Via email at email@example.com
- On the mezzanine Tuesdays from 9-10am, Fridays from 9-10am.