27
#UXPA2016 www.uxpa2016.or Session Survey: http://www.uxpa2016.org/session/survey/5 Conference Survey: www.uxpa2016.org/survey Add Axure Prototyping Skills to Your UX Process Debbie Levitt, Principal Ptype UX Agency & Axure Training http://pty.pe PtypeUX

Add Axure Prototyping Skills to Your UX Process

Embed Size (px)

Citation preview

Page 1: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Add AxurePrototyping Skillsto Your UX Process

Debbie Levitt, PrincipalPtype

UX Agency & Axure Training

http://pty.pe

PtypeUX

Page 2: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Hello from Ptype (short for prototype)

UX Strategy & Innovation

Product Concept & DesignCreative Problem Solving

UX Design & Optimization

User-Centered DesignInformation Architecture

Interaction Design

Prototyping

IterationUser Testing

Startup Pitching

Axure Training

Live (on-site or online)Public ClassesVideo Courses

http://pty.pe/services

Presentation ©2016 Ptype. All rights reserved.

Page 3: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Agenda

5:30 – 6:006:00 – 7:307:30 – 8:008:00 – 9:30

Why prototype? Why Axure?Axure lessonsBreakAxure lessons

Page 4: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Why prototype?

It’s part of this complete UX breakfast!

Page 5: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Imagine this. Remember what this does!

Image found on sixrevisions.com

Wireframes require people to “imagine” that clicking or interacting does something they can’t

experience.

They then have to remember that from page to page, screen to screen, without being able to

explore or discover.

Page 6: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Prototyping brings it all to life.• A prototype allows someone to just experience

what you have built without bias, hints, or “imagine it does this.”• Reasons to prototype include:• Bring to life what is static in wireframes and comps.• Brainstorm and explore ideas.• Refine selected ideas.• Present to stakeholders, clients, VIPs.• User testing.• Save time, money, and potential UX debt.

Page 7: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

It costs more to change things after the UX phase

By finding feature, execution, or usability problems before code is written, you can save:

• Time• Money• Conflict• Anxiety• Customer

Sadness

Page 8: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Prototyping fits in the iterative design process

Learn

BuildMeasure

Research & Test

Design & Prototype

KPIs & Hypotheses

Page 9: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Execution matters.

A good idea executed poorly can still fail.

Page 10: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Think about your fave apps and services• Are the ideas really that ground-breaking?• Dating app.• Share photos.• Group message friends.

• Or is it the execution of that idea?• This is so easy to use.• I didn’t feel like I was learning something new. • It worked just the way I expected.• I always know exactly where to go and how to

accomplish my task.

Page 11: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Two steps to meditation bliss

Page 12: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Let’s add 2 more steps

Page 13: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Imagine users reacting to that new design• If a user saw wireframes of those two new screens, they

might think they’re OK. • Have the user have to click on those two pages every time

they want to hear a new track or re-listen to an old track.• Would any user who tested a prototype of that longer

process feel that the app was now…• Faster to use?• Easier to use?• More intuitive?• Better matching their needs?• Judging them as a human?• Co-dependent?

Page 14: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Why should you use Axure?

Best-in-class software that’s affordable and something you’ll never outgrow.

Page 15: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Huge range of prototyping tools• Adobe Experience Design (formerly Comet), Antetype,

App Sketcher, Atomic, Axure, Balsamiq, Briefs, Cacoo, Canvas Flip, Concept Draw, Designer Vista, FairBuilder, Flinto, Fluid, ForeUI, Form, Framer, Gliffy, HotGloo, Indigo Studio, Inpreso, InVision, iRise, JustInMind, Keynote, Kony, Maqetta, Marvel, Microsoft Blend, Mockplus, Origami, Pixate, PowerPoint, Principle, Proto.io, ProtoShare, Simulify, Solidify, UXPin, Webflow.

• And I once saw a clickable interactive prototype someone built in Microsoft Excel. Mind-blowing.

Page 16: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Or why not just write code?• I don’t believe in forcing non-programmers to be programmers.

Challenge people but play to strengths. I met a guy…• Visual thinkers may not be comfy dealing in writing code or using

pre-fab code blocks.• I don’t believe that programmers will like code written by non-

programmers. To a dev, you’re no dev.• What might take a programmer hours to build takes me minutes in

Axure. Rapid prototyping should allow faster iteration than code.• Using Axure is faster than most people think. 200 hours took me 65.• Only advantage of writing production-worthy code over Axure and

tools like it is that the output of the UX team would be code you can immediately push to the customer.

Page 17: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Axure does nearly everything• Speed: fast to use once you’ve learned some core skills• Fidelity: low, medium, high, you pick• Sharing: cross-compatible files; team projects over SVN• User testing: for sure• Support: fantastic, fast, no extra charge• Mobile and touch: swipe, drag, tap, long press• Dynamic elements: for sure• Icon set: built in FontAwesome

Page 18: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Axure does nearly everything• Transitions/Animations: fade, slide, flip, rotate• Dynamic data: yes but no external data• Widget library: yes, download third party ones, or make

your own• Offline mode: Axure is a client. You are not building in

the cloud but you can send files to the cloud for others to view/interact.• Annotations and Documentation/Spec: yes• Print and Export: yes• Collaboration and Feedback: yes

Page 19: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

And more• Masters• Global visual styling (like CSS)• Custom shapes and pen tool• Flow charts and wireframes (not just prototyping)• Mobile responsive web.• Native app prototyping.• Variables and math.• Drag and drop.• Fits in with all approaches and styles (Agile, Waterfall, total

panic).

Page 20: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Fairly priced

Since v7 was a free upgrade from v6and v8 is a free upgrade from v7,

I paid the flat Axure license fee in 2011.

Page 21: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Low, medium, high

Page 22: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Axure facts

• Around since 2003.• 86% of the Fortune 100 use

Axure.• Heaps of companies and agencies

outside the Fortune 100 use Axure.

• Often listed in UX job descriptions as a desired tool.

• All staff are in San Diego.

Page 23: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Since early 2011, there’s only one thing I haven’t been able to build in Axure.A real, working WYSIWYG text editor. Fake it or plug it in later.

Page 24: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

My Training Curriculum

Core Skills Mobile AppPrototyping

Our TimeTogether

16 hrs 8 hrs 3 hrsBeginner and intermediate Axure flow chart, wireframing, and prototyping skills. Learn to think like Axure. You’ll build common elements including forms, carousels, mega menus, and lightboxes.

Advanced class focusing on prototyping techniques for native mobile apps.

We’ll get through some core prototyping skills!

Page 25: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

My Training Curriculum

Core Skills Mobile AppPrototyping

Our TimeTogether

16 hrs 8 hrs 3 hrsBeginner and intermediate Axure flow chart, wireframing, and prototyping skills. Learn to think like Axure. You’ll build common elements including forms, carousels, mega menus, and lightboxes.

Advanced class focusing on prototyping techniques for native mobile apps.

We’ll get through some core prototyping skills!X

Page 26: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

What if I need more training?

Video Course:Interactive Prototyping with Axure RP 8

9+ hrs, 79 lessons, Core Skills plus a few extras

$149.99 USD

http://pty.pe/services/axure-training

Live private and public training optionsOn-site and remote

Page 27: Add Axure Prototyping Skills to Your UX Process

#UXPA2016www.uxpa2016.org

Session Survey: http://www.uxpa2016.org/session/survey/5Conference Survey: www.uxpa2016.org/survey

Questions?

Then, let’s learn and build!PtypeUX Agency & Axure Traininghttp://pty.pe