Types of Ux Prototype
Skill in using Ux prototyping tools is also good to practice in preparation for the course.
A. Pen, Paper + People (‘Wizard of Oz’) – quickly realise novel interaction concepts using pen and paper sketches ‘animated’ by human actors. Good for simulating technology that does not yet exist.
B. Animated Presentation – mock-up visual appearance and simple transitions using image editors (Gimp, Photoshop) and SlideShows (powerpoint). Input/output actions (the behaviour of user interface components) is not the same
C. Wireframe Schematic – simulate the task flow, information organisation and page layout using Wireframer ( Axure (3wk trial only), Balsamiq, Fireworks). The behaviour of individual interface components is functionally accurate e.g. scroll bars, sliders, but visual appearance is not considered.
D. Web Framework – good for full look-and-feel, interactive, but functionally narrow, prototypes, with ‘hard-wired’ data. Options include:
i. Responsive Front-end Frameworks such as Bootstrap, Foundation, Froont.com – good for multi-channel mobile sites; and
ii. Web Development Content Management Systems e.g. Joomla – good for content-rich, ‘publication-like’ sites.
E. Video – good for demonstrating a range of modalities of interaction in various contexts of use, though it is difficult to respond to user choices
There is no best approach to prototyping. Advanced students can select, adapt and combine prototypes to best achieve the defined purposes of the exercise i.e. What features of the interface do we want user feedback about? What experience specifically are we attempting to create?
I also encourage you to take the opportunity of this course to learn about web frameworks, even if you are ‘not interested in coding’. Many Ux-ers are not, so if you can prototype this way, more opportunities are likely to come your way, and your own portfolio/business site may be better also.
These pathways inevitably include some omission and overlap, so please just work around and compensate. The alternative is being directed by me down a single path not appropriate for you !! The videos areavailable through Lynda.com, which KU students have access to.
A. Pen, Paper & People
B. Animated Images
Supplier help files and tutorials should be sufficient to combine screenshots, Visio and Paint files with Powerpoint. Photoshop can get more technical.
1. InDesign CC: Interactive Document Fundamentals with Mike Rankin
2. Photoshop for Web Design with Justin Seeley
3. Designing Web Sites from Photoshop to Dreamweaver with Sue Jenkins
C. Wireframe Schematic
EITHER Omnigraffle 5: Creating Web Sitemaps and Wireframes with Jason Osder
Many find wireframing tools to be very similar to drawing tools and powerpoint, so you may not need this tutorial.
OR Good suppliers will often have a range tutorials from novices to advanced
D. Web Framework
Watch the following videos on Lynda.com
- HTML Essential Training with Bill Weinman. Use a plain text editor such as TextWrangler, Notepadd++
- CSS for Developers with Bill Weinman
- Layouts with CSS in Dreamweaver with Joseph Lowry
Even if you do not really master 1, 2 and 3, you will be surprised how far you can go in prototyping “without writing any code” i.e. by finding a suitable example or template, and then make minor edits to the look and feel.
So be encouraged to continue to:
- Responsive Front-end Framework e.g. Bootstrap , Foundation – good for multi-channel mobile sites.
- Creating a Responsive web design with Chris Converse. Covers the whole process of webpage creation, including Photoshopping the images, and the HTML5.
- Up and Running with Foundation with Jen Kramer. Or Up and Running with Foundation with Jen Kramer.
- Web Development Framework and Content Management System e.g. Joomla – good for content-rich, ‘publication-like’ sites
Joomla! 3 Essential Training with Jen Kramer.
For more front-end technology, continue to:
- Create a Sortable Photo Gallery with jQuery with Chris Converse
- Web Development Environment e.g. Aptana
The latest features include:
9. HTML5 Drag and Drop in depth with Bill Weinman
10. CSS3 First Look with Chris Converse
The key applications – CamStudio, Photoshop Elements and Windows MovieMaker – all come with Help files and tutorials from the suppliers. Camtasia Studio is the professional (paid) edition of CamStudio.
By the end of this course, aim to be able to learn and apply all prototyping technologies by ‘picking up and playing with it’. You will have your preferred approaches, but there will often be a need to learn something new for a new purpose or a new client.