Lec 18: Case Study on Prototype Evaluation - I

Introduction to Prototype Building and Evaluation

Overview of Lecture Content

• The lecture focuses on case studies related to prototype building and evaluation, specifically for a calendar app designed for students.

• Recap of previous lessons includes understanding prototypes, their types, and the process of creating them.

• Two evaluation techniques discussed are cognitive walkthrough and heuristic evaluation, which will be applied in this lecture.

Functional Requirements for Calendar App

• The calendar app aims to assist students with academic activities; functional requirements were previously gathered and organized hierarchically.

• The Software Requirement Specification (SRS) document serves as the foundation for interface design, focusing on user needs rather than code development.

Functional Hierarchy of the Calendar App

Key Functions Identified

• The SRS document outlines several top-level functions:

• Display Calendar

• Set Reminders

• Set Background

• Synchronize Accounts

• Each top-level function has sub-functions that detail specific actions users can perform within the app.

Prototype Development Process

Building the Prototype

• A medium or high-fidelity vertical prototype is necessary for effective cognitive walkthrough evaluations.

• Figma is introduced as a tool used to create the prototype, showcasing various functionalities without implementing all features from the hierarchy.

Interface Demonstration

• Key functionalities included in the prototype are:

• Months in a year view

• Days in a month view

• Reminder management options (create, edit, delete)

• Theme selection capabilities

User Interaction with Prototyped Views

Visual Representation of Features

• The months are displayed in a matrix format across three years (2021–2023), allowing easy navigation through months.

• For viewing days within a month, an enlarged display is provided to enhance visibility and usability.

Example Interaction Scenarios

Calendar Interface Design Overview

Monthly View and Specific Date View

• The design aims to display all days in a month, starting from the first day (e.g., March 2022 starts on a Saturday) along with events for each day.

• A specific date view prototype is introduced, showcasing detailed events for that date, such as "Software Engineering CS506" discussions and project timings.

• Users can switch between different views like timetables, deadlines, and meetings for a selected date. For instance, only class schedules will be shown when selecting the timetable option.

• The system allows users to see either all events or filter them by categories like deadlines or meetings for better organization.

Reminder Setting Functionality

• A reminder setting interface is designed for specific dates (e.g., March 18), allowing users to set reminders for various events.

• Users can input event details such as description, type (timetable, deadline, meeting), duration, and save the reminder through an intuitive interface.

• The interface also supports editing and deleting reminders with similar layouts to maintain user familiarity across functions.

Theme Selection Feature

• The prototype includes a theme selection feature where users can choose from various themes like dark mode or floral designs to personalize their experience.

• Upon selecting a theme, the interface updates accordingly to reflect the chosen aesthetic (e.g., cloud theme or geometric patterns).

Prototype Evaluation Process

• The primary goal of creating these prototypes is to visualize how interfaces will appear without writing actual code; this helps identify usability issues early on.

• Once prototypes are ready, evaluation techniques such as cognitive walkthrough will be applied to assess usability based on real use cases involving students managing assignments and deadlines.

Cognitive Walkthrough Methodology

• Evaluators will utilize defined use cases (e.g., setting reminders for assignment deadlines) to navigate through the interface and identify potential problems during usage.

Interface Level Tasks and Cognitive Walkthrough

Overview of Interface Tasks

• The screen demonstrates the scenario for setting a reminder, showcasing the sequence of tasks required to achieve this objective.

• An animation illustrates the activities involved in setting a reminder for an assignment, emphasizing user interaction with the interface.

Cognitive Walkthrough Team Composition

• A cognitive walkthrough requires a team of 3 to 5 evaluators who are domain experts but not part of the design team.

• Evaluators perform interface tasks on a prototype and compile reports based on their findings, guided by specific questions.

Expert Feedback on Navigation

• Question: Were you able to navigate to the correct month easily?

• Expert 1: Yes, navigated by swiping left from the current month.

• Expert 2: Yes, as it displayed the month needed for setting reminders.

• Expert 3: Yes, simple swipe showed next month's calendar; common mobile navigation method.

• Expert 4: Agreed with others but noted variations in responses among experts.

Error Navigation Insights

• Question: Did you navigate to the wrong month by mistake?

• Expert 1: Yes, but found it easy to return to the correct month by swiping.

• Experts 2 & 3: No errors made; they successfully navigated correctly on first attempts.

Adding Reminders Intuitiveness

• Question: Was it apparent that you could add a reminder by clicking/selecting a date?

• Expert 1: Not apparent initially; events listed helped but unclear about multi-day events addition.

• Experts 2 & 3: Figured it out eventually; not completely intuitive at first glance.

• Expert 4: Also found it not apparent until accidentally clicking on a date led them to add options.

Plus Button Functionality Clarity

• Question: Did the plus button indicate its function appropriately?

• All experts agreed that the plus button clearly indicated its purpose for adding new events/reminders effectively.

Input Fields Visibility and Naming Appropriateness

• Question: Were input fields in set reminder window clearly visible and appropriately named?

• Experts generally agreed that input fields were visible and well-labeled except for one expert who found confusion regarding start/end time labeling preferences.

Assignment Visibility After Addition

• Question: Were you able to see assignments after adding them in deadline view?

• All experts confirmed visibility of added assignments in deadline view with feedback messages confirming successful additions being highlighted positively across responses.

Editing Class Reminders and User Feedback

Editing the Reminder for a Class

• The task involves editing a class reminder to update the timings from 10 AM to 11 AM. Steps include selecting today's date, choosing the software engineering class event, adjusting start and end times, and saving changes.

User Experience with Interface Tasks

• Experts were asked if they could locate today's date; all confirmed it was highlighted clearly in various ways (e.g., blue color or different background).

• When questioned about editing class time by clicking on the event, responses varied: some found it clear while others felt it was ambiguous due to design elements not resembling buttons.

Clarity of Editable Fields

• Opinions differed on whether fields were obviously editable. Some experts noted that pop-up windows indicated editability, while others relied on their experience with similar apps to infer functionality.

Error Handling During Editing

• Most experts reported no errors during editing; however, one expert accidentally deleted an event and suggested implementing a confirmation mechanism before deletion.

Visibility of Updated Timings

• All experts confirmed they could see updated timings after saving changes. They appreciated feedback mechanisms like success messages that made updates transparent.

Navigating Schedule for Meetings

Checking Availability for Meetings

• To schedule a meeting with friends in the third week of next month, users need to swipe left to navigate months, check schedules for available dates without events, and decide on convenient timings.

Expert Feedback on Navigation Features

Swipe Mechanism and Event Visibility

Expert Opinions on Event Visibility in Month View

• Experts had differing opinions regarding the visibility of events in the month view. Expert 1 suggested increasing font size for better clarity.

• Expert 2 noted that only the first three events were visible in chronological order from the day-wise view, indicating limited visibility.

• Expert 3 confirmed that while the first three events were visible, their timings were not provided, which could hinder planning.

• In contrast, Expert 4 stated that events were clearly visible and color-coded, providing a rough overview of scheduled events.

Determining Days with Least Events

• All experts agreed that the month's view effectively indicated days with fewer events. Expert 1 found it useful to identify relatively free days without checking each day's details.

• Experts consistently mentioned task headings helped them determine days with minimal scheduling conflicts efficiently.

Convenient Meeting Times

Deciding Meeting Times Without Clashes

• Experts responded positively about finding convenient meeting times after reviewing event schedules.

• Expert 2 specifically chose a time slot on April 18th due to having only one event scheduled during that period.

• The sorting feature of events by time was highlighted as beneficial for all experts when deciding on meeting times.

Theme Customization Process

Changing Calendar Themes

• The process for changing themes involved selecting an icon labeled "theme" and choosing from available options.

• All experts reported no issues applying themes; they found icons appropriately labeled and procedures straightforward.

Understanding Interface Components

Clarity of Interface Components

• Most experts felt confident understanding interface components, although some noted initial confusion regarding swiping actions and year views.

• Expert 3 mentioned difficulties initially but acknowledged familiarity improved comprehension over time.

Feedback Mechanisms in Interface

Effectiveness of Feedback Provided

• All experts agreed that sufficient feedback was provided after actions taken within the app.

Interface Evaluation of Calendar Application

Adherence to Real-World Conventions

• Experts unanimously agreed that the interface followed real-world conventions, with icons and colors aligning with standard practices found in calendar applications.

• The use of red for delete buttons and green for successful operations was noted as a common convention, enhancing user understanding.

• General conventions such as using a plus sign for adding reminders contributed to the application's intuitiveness.

Design Appropriateness

• Expert feedback indicated that the design was appropriate, with a clean layout; however, font size adjustments were suggested for better visibility.

• Different views (day, month, year) were praised for convenience but highlighted some areas needing improvement regarding intuitiveness.

• Concerns arose about certain elements not resembling buttons, making it unclear how to interact with deadlines or switch views.

User Experience Insights

• Evaluators reported smooth task performance and satisfaction overall; essential actions were clearly represented through functional buttons.

• Feedback mechanisms were effective when users performed actions like adding or deleting reminders; however, confirmation prompts before critical actions were recommended.

Areas Needing Improvement

• Some evaluators struggled with navigation due to non-intuitive design elements requiring prior knowledge of similar systems.

• Users found it difficult to navigate between months and years; clearer instructions on switching views could enhance usability.

Event Management Functionality

• Viewing events by day was intuitive; users could easily access event details by clicking on specific days in the month view.

• While adding events was straightforward via the plus button, editing and deleting processes lacked clarity, leading to user uncertainty about functionality.

Set Theme Functionality Evaluation

Overview of User Experience

• The set theme button is prominently displayed in the main view, making it easy for users to locate.

• The labeling of the button is clear, which aids user understanding and interaction.

• Users can effortlessly select their desired theme, indicating a straightforward process.

• Evaluators' feedback suggests that the functionality is accessible even for layman users.