Autor: Alexa Schlegel

Assignment #10 Evaluation of the test results and final project description

?   Deadline: Tuesday, 13th July 12 PM (noon, two weeks)
 ?   Goals: Evaluate the results of your remote usability testing sessions and sum up your project.

(1) Evaluate your test results.

  • What method(s) did you use to evaluate the results of your usability tests?
    How did you evaluate the results?
  • What did you learn from the testing?
    What are your main takeaways?

(2) Project description

This part is mainly meant to be published on the HCC Group website under News. Please provide all information in English.

  • One image (1000x500 px, png), which shows your prototype. As example and for inspiration check the projects from the last semesters, for example, Idea Perspectives (2019), comRAT-C (2019), unreadable (2018), or projects from 2020.
  • One image (200x200 px, png), which shows some unique part(s) of your project or prototype in a very detailed way (e.g., some logo or part of a screen).
  • Name of your project +tagline/sub-line (e.g., “My Music Mate – Distributed music-making app for musicians in times of social distancing”)
  • Name of all group members (with info of university, study program – just if you want!)
  • Project description text (~ 150 words) consisting of your challenge, a motivation/background/context, your goal, and a description of the functionality of your project/UI.
  • 3-5 additional images
  • Link to your GitHub/GitLab repo, or link to your final prototype.

Assignment #9 – Preparation of a summative evaluation

?   Deadline: Tuesday, 6th July 12 PM (noon, two weeks)
 ?   Goals: Improve your prototype, by fixing usability issues found during heuristic evaluation and prepare for the last round of usability testing.

(1) Improve your high-fidelity prototype

Now there are two weeks left to improve your prototype, to fix found usability issues or implement new features.

  1. Choose the biggest problem found during the last heuristic evaluation and answer the following questions:
    • Why is this the biggest problem for your users?
    • How will you solve it?
    • How do you expect the user will behave, after the problem is solved?
  2. Decide what usability issues you are going to fix in your prototype and what features you are going to implement next.

(2) Preparation for a summative evaluation

On Tuesday, 6th of July, we will conduct (online, sorry for that!) usability tests during the time of the lab/exercise. There will be guests invited from the Human-centered Computing (HCC) research group, who will function as usability test participants. Please prepare for this test session accordingly. We will have three test sessions per group. A test session lasts about 35 minutes.

  1. Please recall your experience and takeaways from your first testing session (Assignment #6):
    What are things you would like to do differently this time?
  2. Prepare all documents (script, consent form, …) you will need during the test session:
    What documents do you need?
  3. This time, you will measure the effectiveness using the task completion rate. Please use the provided template (PDF, see below).
  4. This time, you will also measure the satisfaction of users, by using a post-task or post-test questionnaire. Please choose independently what suits your project.
    Which standardized questionnaire did you choose and why?
  5. Document your preparation.
HCC_Short_ObservationCodingFormHerunterladen

Assignment #8: Heuristic Evaluation

?    Deadline: Monday, 21st June 12 PM (noon)
?    Goals: Continue building your prototype and prepare a heuristic evaluation

  1. Continue to improve your high-fidelity prototype.
  2. Conduct the first and second phases of a heuristic evaluation and prepare to continue with phases 3, and 4 during the next lab session.

Phase 1: Prepare

Use the Nielsen’s Heuristics presented in the lecture.

Prepare the tasks for the evaluators.

Please use an (online) form to collect the violations by each evaluator in a systematic way.

Prepare so everybody can take screenshots and is able to link them in the previous form.

Don’t forget: You need to get access to the application of the other group!

Phase 2: Evaluate (Individual Inspection)

  • Carry out the individual inspection using the prepared documents.
  • Document your violations using your adapted form.
  • All team members should carry out the individual inspection. This should be calculated with 45 minutes per person (max. 1 hour).

Documentation and Reflection

Document and reflect your process and list the files/documents you used during evaluation in the blog post.

Hint: The group discussion (Phase 3) will take place during the next lab session. Prepare for that.

Selected Sets of Heuristics Principles

Assignment #7: Starting High Fidelity Prototyping (First Iteration)

?   Deadline: Monday, 14th June 12 PM (noon)
 ?   Goals: Make a plan on how to build your high-fidelity prototype and start building it.

We now start working on the Hifi-Prototypes and start building an interactive product.

  1. What framework or tools are you going to use? Why?
  2. List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype.
  3. We now have 6 weeks left for our projects. Produce a detailed timeline (e.g., a Gantt-chart or similar) of jobs that need to be done and milestones that need to be reached starting from today.
  4. Start building your prototype.

Please answer the following question: How did you handle the topics: menu, UI consoles, and Design patterns?

  • What menu type did you choose and why?
  • Which UI controls are appropriate for your application and why?
  • Which design patterns are suitable for your application and which ones have you implemented or used? Why?

Hint: During the next lab session (in two weeks), we want to test your prototype using a Heuristic Evaluation. The concept of a heuristic evaluation gets introduced next week.

Assignment #6: Paper prototyping and usability testing

  ?   Deadline: Tuesday, 1st June 12 PM (noon)
 ?   Goals: Conduct formative usability tests.

(1) Continue to develop (or start a new) paper prototype based on new insights or feedback from your peers.

Please document:

  • What and why you have changed your prototype?
  • How you expect this will improve the prototype?

(2) Conduct (at least) 3 formative usability tests.

  1. Develop a script for your usability test.
  2. Document who is taking what role.
  3. Decide if you want to record your test session and how you take notes during the test sessions.
  4. Document who you are inviting for a test session and how long the session lasted.

(3) Document and evaluate the results of your testing.

  • What method did you use to evaluate the results of your usability tests? How did you evaluate the results?
  • What did you learn from the testing? What are your main takeaways?

Assignment #5: First interactive low-fidelity prototype

  ?   Deadline: Tuesday, 25th May 12 PM (noon) (Postponed due to Pentecost!)
 ?   Goals: Create your first interactive low-fidelity prototype.

By now, you have developed a thorough understanding of your project regarding the user, context, and tasks. You also developed a good understanding of the problem you are going to solve and developed a first idea of how your solution could look. Now we will put everything together and enter the design space! You will start to make your first testable prototype.

(1) Summarize the feedback you received regarding your storyboard.

During the last lab session, you gathered feedback from your fellow students. Please summarize the feedback and document which feedback you are going to include in your prototype.

(2) Develop an interactive paper prototype.

You will develop an interactive low-fidelity prototype that represents multiple states or views. Think of your persona, who wants to use your product: What does your persona need at least? What are the must-haves?

Please briefly describe:

  • your prototyping process.
  • the use case and/or model (task analysis from last assignment) this prototype relates to.
  • how the storyboard is reflected in your prototype.
  • self-assessment of potential strengths and weaknesses of this first step into your design space.

Please make sure that your prototype is clickable and other people can access your prototype for testing. Please don’t worry about how your prototype looks like! It is not about how nice things look but about communicating a general idea and the main functionality.

(3) Design rationales

Choose a technique (process-oriented gIBIS or structure-oriented QOC) and apply it with two questions.

Tools for Interactive Paper Prototypes

Suggested process: Do just one more round on paper or pad. Make photos and link your screens using:

  • Marvel POP (Prototyping on Paper)
    App for iPhone or Android
    This would be just enough for now and has everything to make your photos/screens interactive.
  • Marvel
    Web application
    One free project with max. 6 team members.
  • Figma
    Web application
    One free team project!
  • Invision (Prototype)
    Web application
    One free project with collaborators,

Other tools to consider: Sketch (Mac only!), AdobeXD, Axure (30 day trial), Balsamiq (only a 30 day trial).

Examples

Example from summer term 2020 using figma.

Assignment #4: Ideation and Storyboard

  ?   Deadline: Monday, 17th May 12 PM (noon)
 ?   Goals: Defining a conceptual model for a specific task and create a storyboard.

This assignment gives you the chance to deepen your knowledge in conceptual model building focusing on tasks. Furthermore, you will create a prototype in the form of a storyboard.

(1) Formulate a problem and hypothesis statement and document it.

Please use the template (page 11+12) introduced in the lab session:

Problem Statement

[The name of your PRIMARY persona] needs a way to [user’s need] because [insight]. We will know this to be true when we see: [this quantitative/qualitative measure].

Hypothesis Statement

We believe that by [doing this / building this feature / creating this experience] for [the name of your primary persona], we will achieve [this quantitative / qualitative outcome].

(2) Conceptual models for task analysis

  • Choose to create one of the following:
    • (a) task analysis with HTA
    • (b) task flow with BPMN
    • (c) sequence model,
    • (d) artifact model, or
    • (e) physical model
    • Choose according to your project and time constraints.
    • You can also choose to do more than one, depending on your project.
    • Please justify your choice.

(3) Find inspirations, analogies, and create a moodboard.

  • A moodboard is a great way to arrange a collection of ideas, screenshots, and inspirations.
  • Step 1: Each team member is doing individual research for transferable ideas and features.
  • Step 2: Share your ideas within your team and create one single moodboard.

(4) Create individual sketches.

  • Now it is time for solutions and first drawings!
  • Step 1: Look at your moodboards, your persona, your problem/hypothesis statement, and focus!
  • Step 2: Each person in the team is drawing on paper (drawing on a tablet is also okay!) a solution he/she thinks would solve your problem.

(5) Share your sketches with your team.

  • Each person should present his/her first drawing to the other team members.
  • Select features and ideas you think should be part of your prototype.
  • You can use the dot-voting method again to make faster decisions.

(6) Condense your results from the previous step into a storyboard.

  • Examples and hints on storyboards: 04-2 HCI Iterative Design and Prototyping (page 8)
  • You should not spend too much time with it, and your solution does not need to be perfect. We will continue working on that!
  • This step aims to explain your idea/solution using the storyboard to your fellow students.

What tools to use for a moodboard?

Why should we work with pen&paper?

If you choose to do a digital solution, then the chance you will stick to your digital solution, and you will not throw it away or fundamentally change it, is very high. Because you put much effort and time into it, it will be hard to throw it away and start over again. „Fail early and often“ – and that just easier with paper. Please be aware: you are creating this software not for yourself but for future users. The goal is, therefore, to meet the users‘ needs and solving his/her problem.

Moodboard Examples

Moodboards created in Summer Term 2020:

  • Group 3: Social Fitness App
  • Group 5: CoroQuiz
  • Group 2: Shop, Drop and Roll

Assignment #3: Conceptual Model for User & Context

?   Deadline: Monday, 10th May 12 PM (noon)
?   Goals: Defining conceptual models for the user and context: Persona, scenario, and use cases.

This assignment requires you to develop a persona, scenario, and use cases. Building on that, we will wrap up by (re)framing the problem statement and hypothesis statement using predefined formats during the next lab session.

  1. Analyze your (qualitative) data using affinity diagramming
    • Conserve your clustering results, so you can go back to them if you need or extend them later on.
    • Document your process, by saving pictures (screenshots) of different stages of clustering.
  2. Derive a primary persona from your data-gathering insights
    • Use one of the examples from the lecture slides as a template (or get inspired by the tools below).
    • Be visual, a picture is mandatory! (Do not forget to specify the image source.)
  3. [OPTIONAL] Derive an extreme character from your data-gathering insights
    • To make life easier (faster) you can choose to make a Proto-Persona.
    • Be visual, a picture is mandatory! (Do not forget to specify the image source.)
  4. Create a scenario
    • Use the example from the lecture (03-3, page 6) as a template.
    • Highlight what and where.
  5. Model two Use Cases with UML
    • You can always do more if this is relevant to your project.
  6. If you think you need to do more data gathering – go for it!
    • Please document your data gathering methods.

Tools and Templates for creating personas

Mentales Model

Das mentale Model der Nutzer:innen wird oft auch als konzeptionelles Model bezeichnet. Es reflektiert die Sichtweise der Nutzer:in auf das System. Sie entwickeln Wissen über das System: (1) wie man mit dem System interagiert und (2), wie das System funktioniert. Dieses Wissen wird auch als mentales Model bezeichnet. [2]

Das mentale Modell bezeichnet also die eigenen Vorstellungen der Nutzer:innen darüber, wie sie das System benutzen bzw. damit interagieren und wie das System funktionieren könnte [1].

Nutzer:innen verwenden es, um Schlussfolgerungen über das System zu ziehen oder abzuleiten, was sie tun müssen, falls etwas Unerwartetes passiert. Umso öfter ein Nutzende ein System verwendet, umso mehr lernen sie über das System und entwickelt ihr mentales Model weiter. [2]

(By: Alexa Schlegel)

[LU#01, 01-3-HCI_Human-Centered-Design.pdf, Slide 9]

Image by Alexa Schlegel, but adapted from [1] and inspired by [4].

Sources:

[1] Cooper, A., Reimann, R., & Cronin, D. (2007). About face 3: the essentials of interaction design. John Wiley & Sons.
[2] Jenny Preece, Yvonne Rogers, and Helen Sharp. 2015. Interaction design: beyond human-computer interaction (Fourth edition ed.). Wiley, Chichester.

Further Resources:

[3] World Leaders in Research-Based User Experience. Mental Models and User Experience Design. Nielsen Norman Group. Retrieved April 23, 2021 from https://www.nngroup.com/articles/mental-models/
[4] 2020. UX mental model, implementation and represented models in UX and dev. Point Jupiter – Web development & UX design agency. Retrieved April 23, 2021 from https://pointjupiter.com/ux-mental-model-representation-implementation-user-experience-development/
[5] Mental models. Retrieved April 23, 2021 from https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/mental-models
[6] Video: What is a Mental Model?

Assignment #2: Data Gathering

?   Deadline: Monday, 3rd May 12 PM (noon)
?   Goals: Analyzing the problem space by applying data gathering methods. Prepare and conduct interviews.

This assignment requires you to develop a wider understanding of what you are dealing with. We expect you to become experts in your project and problem(s). The data you gather from this assignment will be crucial for the following weeks. It is going to be the foundation for your further work. Gather data that helps you describe the precise circumstances of your problem you are trying to solve. It is necessary to get to know your users and other stakeholders in-depth.

Recap – Data gathering methods: Diary, Survey & Questionnaire, Interviews (structured, unstructured, semi-structured), Observation, Contextual Inquiry, Focus Groups, Analyze existing software, Tracking (Weblogging)

Make a plan.

  1. Define the goals of your data gathering session.
    What do you want to find out?
  2. Based on your goal, derive the kind of people you want to gather data from.
    What are your participants?
    Who are you interviewing?
  3. Decide on your data gathering method.
    Constraints: You have to conduct at least one in-depth interview with the person you chose to consult in Assignment #1. Besides, you have to choose one other data gathering method.
    Which methods are you using and why?
    What type of interview (structured, unstructured, semi-structured)?
    What kind of data do you want to gather?
  4. Decide how you handle the topics pilot study & data recording.

Prepare and conduct an in-depth interview.

  1. Write a script for the interview.
    The interview should not take more than 60 minutes.
    Prepare questions.
  2. Think about how you conduct the interview.
    It is advisable that all team members are present during the interview.
    Who is taking notes?
    How do you take notes?
    Who is asking questions?
  3. Store your collected data, we will need it during the next session.

If you are audio recording your interviews make sure to use a Consent Form.

Conduct one other data gathering method.

Please decide what other data gathering method might be appropriate for your project and also manageable in the given time. Maybe you want to conduct shorter interviews with more people? Maybe you want to observe people on how they do or use something? In your project, it’s best to analyze existing software?

  1. Document your method and the type of data you are gathering.
  2. Store your collected data.

Summarize your work in a structured way in a blog post.

Next step: We will dive into affinity maps and we will learn to sort and order the data you gathered in order to derive insights.

Best Practices on Interviews

You can use the handout Personal Interview Guidelines for some guidance. Don’t forget to have a look at the Hands-on Guide on Developing Your Interviewing Skills in the lecture material. For more inspiration on what question to ask, refer to the Helsinki Design Lab’s “Ethnography Field Guide.” While it was written with a different kind of study in mind, the basic question can still be a good starting point.

Short hints on interviews

  • Know What You’re Looking for
  • Keep Your Questions Simple
  • Don’t Ask Leading Questions
  • Ask Questions that Reveal Actual Behavior
  • Keep Asking “Why”
  • Don’t Ask „Yes“ or „No“ Questions

Hints on surveys

Creating good surveys in a short amount of time is challenging. Using the questions from your interview as a good starting point. If you decide to try out a survey take a minute to read InVision’s article “How to Quickly Create a Powerful Survey.”. Sidenote: this is a hand-on guide and not a scientific article, please be aware of that.