hcc 613 … · medium fidelity: desktop ui prototyping tools 3/2/16 . 2 human-centered compu/ng at...

Human-CenteredCompu/ngatUniversityofMaryland,Bal/moreCounty1

HCC 613

Medium Fidelity: Desktop UI Prototyping Tools 3/2/16


Wordpress Questions / �Tech Support

Reading and Inspiration grades posted to blackboard HW grades coming soon!


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.


Homework Critiques

Questions about Task Analysis?


Reading on Refining Features

80/20 rule


Before and After


Thoughts on moving from paper designs to the screen?


Critiques Through Evaluations

Critiquing PowerPoint 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 their experience •  Talk with them about how to improve the

prototype


Thoughts on Evaluating PowerPoint 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?

•  We won’t do wireframes in this class •  Some of you may choose to


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

Using Interface Builder Tools AKA the stuff you thought you would do in this class. (=


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


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?


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.






•  What does the tool produce?


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






•  What does the tool produce? •  What widget toolkit does it use?


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


What is a Widget Toolkit?

A library of widgets that is specific to the environment

•  Operating system •  Windowing system •  API •  Brand…


What is a Widget Toolkit?


What is a widget toolkit?

hIps://www.eclipse.org/swt/


Name that Toolkit!

hIp://guitoolkits.com/android-gui-toolkit/


Name that Toolkit!

hIp://guitoolkits.com/iphone-gui-toolkit/


Name that Toolkit!

hIp://guitoolkits.com/windows-phone-gui-toolkit/


Name that Toolkit!

hIp://guitoolkits.com/bootstrap-gui-toolkit/


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



JAVA-Code



Axure-Wireframes



JustInMind-Html


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


For next time

Let’s move up to Medium-Fidelity!


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


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.


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

Interactive sketching for the early stages of user interface design. http://dx.doi.org/10.1145/223904.223910

hcc 613 … · medium fidelity: desktop ui prototyping tools 3/2/16 . 2 human-centered compu/ng at...

Documents