Presented at STC Currents, Atlanta, April 17, 2010. Prototyping in General Types Tools Process Axure Basic Features Example Projects
Transcript
Prototyping (Using Axure)
Krista Kostuch, CUAUsability Analyst, Sr.Synovus Financial Corporation
Me
Presenter
Presentation Notes
Let’s start with introductions – First ME How I got here and why Secondary Education/English, minor Psychology English Teacher and coached - burned out after 1 yr Technical Communicator – became STC member, learned about usability techniques through Dr. Hughes (my inspiration) Information Designer Content Manager Usability Analyst All this led me here… Prototyping is now one of the many techniques I use.
This t-shirt has nothing to do with YOU (well maybe it does), but I thought it was funny and it kind of leads into what I’m going to say next about why you are here… Story about lady in breakroom – Do not ASSume - experiment with new technology to find what works best for you. I thought this may be an interesting topic for those in fields related to Technical Communication (such as mine), UX design, IA, Content Management, Instructional Design. Or those exploring the idea of a career change and would like to learn more about this usability technique. Quick Poll – Why are you here? What do you want to get out of this? Prototyping in general or Axure? I hope you leave here today with new knowledge and inspiration.
Today’s Topics
Prototyping in General
Types
Tools
Process
Axure
Basic Features
Example Projects
Questions/Discussion
Why Prototype?
Presenter
Presentation Notes
Why do you think we need to prototype? benefits/value Just one of the many techniques used in User-Centered Design. It is the most “High Profile”.
Presenter
Presentation Notes
Who’s seen this before? In case you haven’t… Goal: Reduce the difference between what’s specified in the requirements and what’s developed.
Types
of
Prototypes
Low Fidelitysketchy and incomplete—has some
characteristics of the target product but is otherwise simple, usually in order to quickly produce the prototype and test broad concepts.
what you need to start with
“quick and dirty” and “cheap”
can help focus on the interaction, and not the visual
Presenter
Presentation Notes
Low fidelity - prototype that is sketchy and incomplete, that has some characteristics of the target product but is otherwise simple, usually in order to quickly produce the prototype and test broad concepts. What “tools” do you need to create a low fidelity prototype?
Low Fidelity “tools”
Pencil and paper
Whiteboard
Visio
PowerPoint
Balsamiq
Presenter
Presentation Notes
balsamiq
High Fidelity
Close to the final product
Realistic interaction and visual design
Prevents waterfall of designing after the requirements
Keeps focus on user experience
Lets you very quickly and easily create a realistic user experience.
Presenter
Presentation Notes
High fidelity – show M:\Published_Prototypes\SVP2\index.html
Tools
Presenter
Presentation Notes
What tools do you use? Visio, Word, hand sketches, irise, fireworks, excel! Use what works best for you. I am not a salesperson. I used Visio for years until 2005/2006 when Dr. Hughes introduced me to Axure. As long as the tool is easy to use and can help facilitate the conversations between you and the business and the user (is this what you meant?) and IT (what will it take to build this?).
Rhetorical - How does this fit into the or YOUR Software Development Life Cycle? Who comes from a shop that does Waterfall? Agile? Waterile? Agilfall?
Whatever way, it must be done early and often – iteratively.
from Boxes and Arrows
Presenter
Presentation Notes
Iterative process for prototyping (just prototyping)… does not include usability testing . Start with big picture(s) low – move to high fidelity Same with enhancements – low to high and then do your usability testing. It’s like any creative process. For example, many of you I’m sure outline on paper, “sketch” ideas before entering into your “tool” of choice.
Axure
What is it?
“Axure RP is a wireframing, prototyping and specification tool used by user experience designers, information architects, business analysts and product managers to design applications and websites.” axure.com
Axure
Pros
Allows to make quickly wireframe: drag and drop text boxes, form components…
Numerous interactions (tabs; conditional events; hidable panels…) easy to create
Reusable components
Easy to add comments visible in the output
Export HTML
Export specs in doc
Cons
Generated HTML is not reusable (made up of images, and absolutely positioned divs)
Price (about 589 USD)
Tables integration weak (can put only text in it, no form elements, no buttons…)
I do not work for Axure. I just use it everyday.
Let’s Play
Presenter
Presentation Notes
Check clock – should have at least 30 minutes left. Open Axure and show How to Use Sample project – SVP?
Basic Axure Features
Annotated Wireframes
Basic Interactions
Dynamic Panels
Masters
Flow Diagrams
Interactive Prototypes
Functional Specification
Presenter
Presentation Notes
To review… More advanced – visit axure.com Great videos! Much more entertaining than me
You can download a free trial at Axure.comAgain…I do not work for Axure.
A few Best Practices/Tips
Data gathering first and foremost
Iterative process – low to high fidelity
Structure, Presentation, then Behavior
Design to the/a grid
Usability testing is a must at all stages of the process
Presenter
Presentation Notes
Test early and test often – next session… Yina Li, Will Sansbury, Rachel Peters
Presenter
Presentation Notes
On of my favorite quotes. It’s that simple. Enough said