Interaction Design

For this module we are going to explore the fundamentals of user interaction and experience design. Before all that however, we're going to finish introducing you to wireframe prototying if you haven't mastered it already. Then we're going to define user stories: it's vital to implement our main features. Our main features are what give our application our unique value: in our case our AI algorithm. Than, we're going to learn about interaction design, after which we're going to work on our vertical slice based on our user stories and interaction design knowledge!

Learning Objectives:

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

  1. Defining User Stories;
  2. Interaction Design;
  3. User Experience Design;
  4. Prototyping a vertical slice.
  5. prototyping HCAI application using wireframe software;

Table of contents:

  1. Introduction to wireframe prototyping using Proto.io: 1 hour
  2. Defining User Stories: 1 hour
  3. Interaction Design & User Experience Design: 4 hours
  4. Workshop: Prototyping a vertical slice: 2 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) Introduction to wireframe prototyping using Proto.io

Didn't you manage to finish the introduction to wireframe prototyping using Proto.io yesterday? Then finish yesterday's material first!

Save your Wireframe Prototype to Github, name it ‘HCAI_Wireframe_[NameOfApplication]_[StudentName]' (if you didn't do so already) and note what your did; and your evidence, in your work- and learning-log

Now that we have come to grips with creating a wireframe prototype using Proto.io, we're going to continue with understanding what makes up good user interaction. Tomorrow we will continue to design our prototype, specifically we are going to design a vertical slice for our own computer vision algorithm!

2) Defining User Stories

Before we can continue building our prototype, we first need to define what would make up our vertical slice using user stories after which we are going to learn about interaction design. Then we can use our user stories and interaction design knowledge to build a wireframe prototype using proto.io! Tomorrow in class, we're going to demonstrate our vertical slice prototype to our classmates and gather feedback!

A vertical slice is essentially the core of your application prototyped and only that. For you that will mean that you design the interaction around how you are going to use the deep learning algorithm; which is going to do the computer vision magic.

The following video will explain this concept in more detail!

So, we already made the algorithm which contains our core functionality and the database. But doing the programming to actually create the real application is something outside the scope of this project. However, the UI and UX is something we can test already for our envisoned applications. So, to start designing the UX; and UI, we need to know what the user needs and wants to do, which is where user stories come in.

Watch following video:

User-stories from Software Design: Developing Effective Requirements by Neelam Dwivedi

So, say I have a beer label scanning algorithm, then I want to just build a prototype screen of how the user would see a beer bottle, what information he has, what can he do with that core functionality? My user might be able to click on a pop-up which automatically googles that specific beer or presents him a suggestion of some native library of beers so I can get more information. Or I can save the beer, and add to my library of beers I consumed; with that I may be able to give it a review containing a score, a description and a taste profile (also for ourselfs so we can gather data to imrove the UI and maybe sell users more beer). And every time I scan that beer again, those interaction options will pop-up. So, as a user I:

  • can scan beer bottle labels;
  • can save the label;
  • can review the beer by assigning a score, description and taste profile;
  • can buy beers based on my taste profile.

Now, open your HCAI design document, create a section called ‘User Stories' and start creating your own user stories. Use bullet points to list the user stories. Tomorrow in class, we're going to demonstrate our vertical slice prototype to our classmates and gather feedback! So make sure to have finished your user stories before the end of the day so you can do some user tests (peer reviews in this case) tomorrow!

Upload your document to Github!

3) Interaction Design

Interaction is all about change: by exchanging information in the form of data or energy we're creating some kind of new state in the world. I can for example gain new information in the form of data by vision, sound or vibrations; this new information makes the user aware of something; changing the internal state of the user. Or I can exchange information in the form of energy by kicking a football and which after my interaction will interact further with the environment. What it essentially comes down to when you are designing for interaction is that you create some kind of change which the user can anticipate and understand without thinking: Design should be intuitive.

Like doors, they are great when they are intuitive. Like the door of our classroom. But some doors, they just don't make sense and are very frustrating…

So now that we learned why some doors are more frustrating then other, and how we should design intuitively: making interaction predictable for the user. We can dive into the topic with more depth.

Do the full LinkedIn Learning course on UX Foundations: Interaction Design and save the certificate to your github and evidence it in your learning- and worklog

Interaction design from UX Foundations: Interaction Design by David Hogue

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!

4) Proto.io: Create a vertical slice for your wireframe prototype

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?

Don't worry if you can't finish your vertical slice today, tomorrow we'll continue working on it. But do bear in mind that you should finish your vertical slice tomorrow!

Next up!

Coming Datalab we will reflect on Interaction Design and User Experience!

Tomorrow, we will first continue to expand our knowledge by applying it a subfield: interface design and flow! We will also continue to further work out our vertical slice tomorrow!

Resources

Recommend Literature:

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

Further Reading:

− Designing with Data − The Design of Everyday Things, Donald A. Norman