Interface Design

After covering the basics of interaction design, we're going to look at interface design: the means by which users communicate with computerized devices. We're also going to look into flow theory, engagement and immersioin! Finally, we're going to continue working on our wireframe prototype, specifically finishing the vertical slice of our wireframe prototype in proto.io!

Learning Objectives:

After this module, you'll gain a basic understanding and learn how to apply:

Flow-Theory;
User Interface Design;
Prototyping a vertical slice with proto.io.

Table of contents:

Flow: 1 hour
User Interface Design: 1 hour
Prototyping: Create a vertical slice: 4 hours

Now, open your worklog and plan the different tasks for today there!

Questions or issues?

If you have any questions or issues regarding the course material, please first ask your peers or ask us in the Q&A in Datalab!

Tip: Note down any important questions you might have!

Good luck!

1) Flow

In positive psychology, flow is considered to a mental state in which a person is fully immersed; fully focussed; fully involved and fully enjoying a given activity. Essentially, it's a form of complete absorbtion into the activity: all that matters and all the mind is involved in is the activity and it's relevant elements. That's what it means to be in the flow!

Do the full LinkedIn Learning course below and save the certificate to your github and evidence it in your learning- and worklog

The power of flow in interaction design from Interaction Design: Flow by Diane Cronenwett

Did you do the full course already? Make sure to get the certificate an upload it to GitHub and evidence it in both your worklog and learning log!

2) User Interface Design

An interface is essentially a means of interaction between two objects: two stars inferfacing with each other using gravity or a person; or user, and a computer interfacing with one another using some computerized device. A User Interface (UI) can be low-fidelity like controlling a electricity generator with some buttons, medium-fidelity like a keyboard and a programming IDE where one has to literally insert and verbalize the commands, or high-fidelity where the user is guided through the functionality the computerized environment provides like a fancy smartphone app or virtual game! Note that fidelity is a measure of how the quality of the interaction; whereof visual fidelity is a component which is important but other means of interaction (audio, haptic, movement, etc.) and how interaction takes place (timing, conditions for triggering, consequent effects etc.) are equally important. Now that we know what a user inferface is, let's dive deeper into how we can design one for our application!

Do the full LinkedIn Learning course below and save the certificate to your github and evidence it in your learning- and worklog

Introducing the interface from Interaction Design: Interface by Diane Cronenwett

Did you do the full course already? Make sure to get the certificate an upload it to GitHub and evidence it in both your worklog and learning log!

Want more information? Here's a good article with some concise universal guidelines!

4) Prototyping: Create a vertical slice

Now, use the skills you learned so far to create a vertical slice of only the screen(s) where you computer vision algorithm is actively used in Proto.io.

So for the beer bottle scanner app, this would just be the camera and what the user can do there; which user stories are connected to using that feature?

Next up!

Coming Datalab, we will user test our vertical slice prototypes by peer-reviewing them! After that we're going to do a very magical Wizzard of Oz workshop, and ofcourse it'll be an opportunity to ask any questions you might have!

Resources

− Interaction Design: beyond human-computer interaction
− UX Fundamentals for Non-UX Professionals : User Experience Principles for Managers, Writers, Designers, and Developers