hcc 613 · and then build taxonomies of them 3. entity/object based analysis • relationships...

Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty1

HCC 613

Medium Fidelity: Clever Hacks 2/24/16


Wordpress Questions / �Tech Support


HCC Inspirations

Break into 5 groups and discuss inspirations for 5 minutes. 1 person from each group will have 2 minutes to share something cool. Can’t be same sharer from last week.


Reading on Task Analysis


Task Analysis Overview

Develop an understanding of your user’s life •  What tasks they perform •  Why they perform these tasks •  How they perform them


Approach, notations and techniques

1.  Task decomposition •  Splitting task into (ordered) subtasks

2.  Knowledge based techniques •  List what what the user knows about the task

and how it is organized •  List all objects and actions involved in the task,

and then build taxonomies of them

3.  Entity/object based analysis •  Relationships between objects, actions and the

people who perform them •  Won’t cover this today (Section 15.5 of reading)


When making your own TA…

What is the main goal you are trying to support?

•  What data do you have to indicate this is important to users?

What are the sub goals you want to support? •  Which are most important to your stakeholders? •  Which does your prototype implement?

List these goals and sub goals, and then try making a TA to describe your system.


Two Types of Task Decomposition

Hierarchical Task Analysis (HTA) – descriptions of information requirements for lowest level sub-operations including a dictionary of objects and associated actions Cognitive Task Analysis (CTA) – Includes cognitive characteristics of task space (e.g. cognitive load, response time, cognitive processing, display interpretation).

– Will not be focusing on CTA in this class


Types of Hierarchical Task Analysis

TextualHTA Diagramma0cHTA


Homework Critiques

Share your task analysis with your neighbor


Break


Homework what’s due when?

Brainstorming / Screen size (maybe v2) User / Task / Environment (maybe v2) Domain (maybe v2)


Critiques Through Evaluations


Evaluation Pre-Planning

Work individually to answer these questions •  What specific question do you want to learn from

your evaluation? •  What “role” will your user take?

•  What do they need to know about your user?

•  What task will your user perform? •  What compromises did you make with your

prototype, and how will you help your user overcome them?

•  How will you document what they do? •  What questions do you want them to answer?


Try it out

Work with someone you haven’t worked with this semester and have them try out your prototype

•  Start with one task •  Can try more than one task

•  Talk with them about the interaction •  What is clear vs. confusing? •  What is natural vs. awkward

•  Talk about Task Analysis •  What needs more detail?


Thoughts?

Physical vs. on screen? Full sheet vs. to size paper? Details on prototype? Know what’s going to happen in v2?


Fake it till you make it…

Clever “hacks” to build semi-interactive digital prototypes


Prototyping: When/How?

Brainstorm different representations Choose a representation Rough out interface Style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign

Limited field testing Alpha/Beta tests

Low fidelity paper prototypes Medium fidelity prototypes High fidelity prototypes Working Systems

EarlyDesign

LateDesign


Are wireframes dead?

Article from Amanda’s inspirations https://613mancuso.wordpress.com/ http://www.uxforthemasses.com/rapid-prototyping/ “Wireframes, your time is up. You’ve served your purpose. You’ve brought order where there was once chaos and provided gainful employment for thousands of UX designers, but I’m afraid now it’s time for you to go to the big recycling bin in the sky. You’re just no longer cut out for the cut and thrust of UX design and have been replaced by that young upstart called rapid prototyping. In this article I argue why you too should ditch wireframes and embrace rapid prototyping.”


What is a wireframe?


Wireframe pros / cons

•  Wireframes (which are static by nature) are not well suited to defining dynamic on-page interactions

•  Wireframes are not very user friendly •  Wireframes are typically very open to interpretation. •  Wireframes often add unnecessary drag to the design

process and can encourage death by documentation

Article proposes moving from sketch to rapid prototyping? Anyone want to advocate for wireframes?


Tradeoffs in moving up fidelity?

Need to decide on design language •  Make color / type / image decisions

Need to fill in “the gaps” (images, text)

•  http://ipsum-generator.com/ •  http://dummyimage.com/

Will people think it’s real?


Creating Interactive Prototypes


Creating Interactive Prototypes

In Powerpoint! http://boxesandarrows.com/interactive-prototypes-with-powerpoint/


Why Create in PowerPoint?

Familiar to many people, Flexible: supports, text, images, and video Ubiquitous software

•  People have it •  Free / inexpensive •  Easy to share, nothing to install, no API

updates Stable software

•  Isn’t going away anytime soon


Prototyping in PowerPoint / Keynote

Really helpful howto https://www.youtube.com/watch?v=xp7pvUUWWzs

hIp://celinelatulipe.com/


Prototype in Excel / Numbers

•  Hide the gridlines, but make use of the grids to color in cells to block off different areas of your prototype.

•  Use one sheet for each main screen of your prototype and create hyperlinks to control the flow

•  Can perform calculations! •  Can also embed graphics and other

objects. hIp://celinelatulipe.com/


For next time

Let’s move up to Medium-Fidelity!


Build Semi-Interactive Prototype

Revise your paper prototypes first! •  You need to submit V1 and V2

Choose your Medium-Fidelity Tool •  Either PowerPoint or Excel •  Can use Keynote or Numbers or

OpenOffice… Create your revised prototype using this tool

•  Unless there is a major problem, stick with the same tasks


Build Semi-Interactive Prototype

Need to make decisions about your design language

•  Typography & Color & Structure & Images •  Ok to use dummy text and images

Turn in: post prototype (V1) to Box Be sure to include task analysis describing what this prototype does.


Assignment grading (70%)

This is a face paced class, where I expect everyone to keep up. You will have weekly assignments with significant writing each week.

•  Each assignment will be graded. •  You will get additional feedback from your

peers (in class) •  You will work on each assignment for two

weeks, and submit 2 versions (same model as HCC 710)


Assignment grading (70%)Upload all documents necessary to evaluate your prototype to Box (40%)

–  Version 1 folder –  Version 2 folder

Overall quality of prototype and documentation (10%) Blog post documenting assignment (50%)

1.  300 word explanation of how this prototype’s design meets design context (10%)

2.  200 word summary of what happened between V1 and V2 (10%) 3.  Images of V1 and V2 (10%) 4.  200 word reflection on this prototyping skill (10%) 5.  Identify at least one other domain/ project / situation where you see using

this skill for (~100 words) (10%)


Readings

Will be posted to box tomorrow

hcc 613 · and then build taxonomies of them 3. entity/object based analysis • relationships...

Documents