Interaction Design Workshop BIME 591 Winter 2014

Last Time… We brainstormed the basic features and/or workflows of our informatics solutions. Now let’s build something…

Wireframing A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates. (Taken from the Stanford D-School Bootleg)

The Wireframing Concept... Try the Wirify link on your favorite website:

(Taken from the Stanford D-School Bootleg)

Prototyping Tools…

What is it: Balsamiq is a rapid wireframing program Create cartoony ‘sketches’ that adhere to the true spirit of wireframing Large library of drag-and-drop UI elements for quick prototyping Allows for very limited interactivity (i.e. link pages together with a click) The online version myBalsamiq supports group design with communication and versioning tools How to get it: I have a teaching license, so I can give you free access to myBalsamiq for this class. Getting started: Good tutorial on wireframing, linking, versioning, and sharing designs with your project team: Example mock-ups:

What is it: Axure is another rapid wireframing program The look is sharper and more polished than Balsamiq It has a smaller library of UI elements… … but adds a lot of capabilities in terms of user interaction It unfortunately does not really support collaboration unless you have a shared drive or SVN How to get it: As a UW student, you can get Axure for free! Download the free demo version and apply for a free student key here: Getting Started: Videos on how to create pages, link them, define interactivity, and host them online for demoing: How to set up team projects (not recommended for this class)

What is it: inVISION is a free online tool that turns visual interfaces into interactive prototypes. Start by entering pictures of your UI pages Define interactive hotspots and link your pages together Obviously works best if you already have a graphic design of your interface handy Has tools for collaboration and group design How to get it: Free online sign-up: Getting Started:

What is it: Wix is an actual website building tool based around the use of pre-defined templates. Very stylized, so it looks like a finished product. However, the templates can be restricting, and they seem focused on business or personal uses It does have an ‘app store’ with different widgets that might be useful Will not work for every project How to get it: free online sign-up: Getting Started:

What is it: Joomla is An open-source content management system/website builder. Builds an actual website, but is the most complex option here I wouldn’t really recommend it for this class How to get it: Sign up for a free demo online: Getting Started:

Individual Design Time Have each team member design something on their own. Every person picks a piece to design? Everyone design the whole system?

Group Design Time Bring it all together! Goal: Have two versions of each screen for evaluation!

Next Time… More prototyping! Some prototype evaluations.

Prototyping Bootleg – Prototyping Frog – Prototype It IDEO (p106) – Make Ideas Real Bootleg – Identifying a Variable Usability.gov – User Interface Elements Usability.gov – Wireframing --- The Prototyping Software ---