Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty1
HCC 613
Medium Fidelity: Desktop UI Prototyping Tools 3/2/16
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty2
Wordpress Questions / �Tech Support
Reading and Inspiration grades posted to blackboard HW grades coming soon!
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty3
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.
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty4
Homework Critiques
Questions about Task Analysis?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty5
Reading on Refining Features
80/20 rule
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty6
Before and After
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty7
Thoughts on moving from paper designs to the screen?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty8
Critiques Through Evaluations
Critiquing PowerPoint Evaluations
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty9
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?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty10
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 their experience • Talk with them about how to improve the
prototype
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty11
Thoughts on Evaluating PowerPoint Prototypes?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty12
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
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty13
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
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty14
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.”
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty15
What is a wireframe?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty16
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?
• We won’t do wireframes in this class • Some of you may choose to
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty17
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty18
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?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty19
Creating Interactive Prototypes
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty20
Creating Interactive Prototypes
Using Interface Builder Tools AKA the stuff you thought you would do in this class. (=
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty21
Finding the Right Prototyping Tools
http://prototypingtools.co/ http://www.c2.com/cgi/wiki?GuiPrototypingTools https://medium.com/user-experience-design-1/the-best-prototyping-tools-8d7dc5c8ee27#.ff03jqkgn
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty22
What tool should I use?
Things to consider • What platform does the tool use? • Where can you run the prototypes?
• What is required for others to run it? • Do you have a local copy?
• What is the cost of the tool? • How long is a free trial?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty23
Prototype in Flash or Dreamweaver
Make your prototypes in Flash! http://boxesandarrows.com/quick-and-easy-flash-prototypes/
Is this a good idea? Well, it used to be!
• Took a lot of effort to make Flash prototype, but it had animations built in!
• Good conversations about “Flash” vs. Real Code • Flash was very flexible • Alas, Flash is dead. No one will ever interact with
my dreamweaver prototypes.
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty24
What tool should I use?
Things to consider • What platform does the tool use? • Where can you run the prototypes?
• What is required for others to run it? • Do you have a local copy?
• What is the cost of the tool? • How long is a free trial?
• What does the tool produce?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty25
What does the tool produce?
What output do you want? • Html code? • .java code? • .pdf ? Or .pptx?
How will you decide what is most appropriate?
• Depends on evaluation environment • Depends on final product • Can’t release a .pdf as final code
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty26
What tool should I use?
Things to consider • What platform does the tool use? • Where can you run the prototypes?
• What is required for others to run it? • Do you have a local copy?
• What is the cost of the tool? • How long is a free trial?
• What does the tool produce? • What widget toolkit does it use?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty27
What is a widget?
Informal name for graphical control elements used to create a graphical user interface Who can name a widget?
• buttons, checkboxes, combo box…
hIps://en.wikipedia.org/wiki/Widget_%28GUI%29
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty28
What is a Widget Toolkit?
A library of widgets that is specific to the environment
• Operating system • Windowing system • API • Brand…
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty29
What is a Widget Toolkit?
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty30
What is a widget toolkit?
hIps://www.eclipse.org/swt/
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty31
Name that Toolkit!
hIp://guitoolkits.com/android-gui-toolkit/
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty32
Name that Toolkit!
hIp://guitoolkits.com/iphone-gui-toolkit/
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty33
Name that Toolkit!
hIp://guitoolkits.com/windows-phone-gui-toolkit/
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty34
Name that Toolkit!
hIp://guitoolkits.com/bootstrap-gui-toolkit/
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty35
Interactive GUI Builders
WYSIWYG tools hat help you visualize what your interface will look like
• Drag and drop interactors / widgets into a work area
• Excellent for test driving interaction • Beware, you are constrained by the
supported tookit(s)! • How will you decide what toolkit to use?
hIp://www.cc.gatech.edu/~stasko/6750/Talks/12-prototyping-uisw-bw.pdf
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty36
Interactive GUI Builders
JAVA-Code
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty37
Interactive GUI Builders
Axure-Wireframes
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty38
Interactive GUI Builders
JustInMind-Html
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty39
Finding the Right Prototyping Tools
http://prototypingtools.co/ http://www.c2.com/cgi/wiki?GuiPrototypingTools https://medium.com/user-experience-design-1/the-best-prototyping-tools-8d7dc5c8ee27#.ff03jqkgn
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty40
For next time
Let’s move up to Medium-Fidelity!
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty41
Build Semi-Interactive Prototype
Revise your PowerPoint prototypes first! • You need to submit V1 and V2
Choose your Medium-Fidelity Tool • Any desktop focused tool (nothing that
only supports mobile) Create your revised prototype using this tool
• Unless there is a major problem, stick with the same tasks
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty42
Build Semi-Interactive Prototype
Need to make decisions about your design language
• Typography & Color & Structure & Images • Ok to use dummy text and images • What toolkit is best for your UI? • OK to use a wireframe tool
Turn in: post prototype (V1) to Box Be sure to include task analysis describing what this prototype does.
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty43
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%)
Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty44
Readings
Interactive sketching for the early stages of user interface design. http://dx.doi.org/10.1145/223904.223910