Kategorie: Assignment instructions

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 #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

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.

Assignment #1: Pitch your Project

Due: Monday, 26th April 12 PM (noon)

In your first assignment, you will prepare a pitch to introduce your project, the problem you want to solve, and your team to your fellow students. This pitch[1] will set the bar for all groups, so be aware that preparation is key! In the end, it has to be clear to the audience:

  • What person will you consult? (name, profession, context)
  • What is the problem you think you are going to solve?
  • Who is on your team?
  1. Choose a team name.
  2. Create a team photo [2]. Please stick to the following format:
    PNG, 16:9 (e.g. 1024px X 576px)
  3. Stick to the project requirements when brainstorming project ideas with your team.
  4. Please answer the following questions (Five Ws + How):
    1. Who is your user group?
      And who might be other stakeholders?
      e.g., business person, parents occupied with homeschooling, young people backpacking by bike or boat, people over 50 living in rural areas, artists, etc.
    2. What is the exact problem?
      e.g., parents are overwhelmed with the homeschooling schedule of their children.
    3. Where is your user group interacting with your software?
      e.g., in the supermarket, waiting for a train, home office, on the road
    4. When is the user group interacting with your software?
      e.g., use it on the go for 5-10 minutes, on lunch breaks, while biking, daily in the morning, etc.
    5. Why do your users need this software?
      Why is that interesting?
    6. How do you want to solve the problem?
      e.g., a mobile app that checks WhatsApp messages for fake news
  5. Prepare a project pitch.
  6. Please stick to the hints for project pitches below.
  7. Summarize your work in a blog post!
    Use the provided template.
    Check out the instruction on How to … write a blog post on WordPress?

Hints for Project Pitches

  • All members of the team need to say something.
  • Five minutes per pitch and three minutes for discussion.
  • Maximum 4 slides.
  • ? Be visual: use slides, make a video, and be creative!
  • We all want to get to know the team!
  • Be prepared to answer questions!
  • Be ready to give feedback to other groups!

If you are wondering what is meant by projects, please check out the projects of last semester: Summer Term 2020, Summer Term 2019, and Summer Term 2018

[1] A pitch is a highly motivated, structured, and visual presentation.
[2] It could be a photo, some drawing of your group, or some icons/symbols per person. (Example)