PRACTICAL PROTOTYPINGWITH AXURE

WHO THE HECK ARE YOU? I’M MARIO NOBLE

WEB DESIGNER FOR 6

FRONT END DEVELOPER 4

UX DESIGNER 4

AXURE USER FOR 4 YEARS

LOS ANGELES CLICHE

EVALUATIONWe’re all blind sometimes.

The primary purpose of prototyping in the digital world is to easily create something that can be evaluated by everyone involved and referenced relatively quickly without needing to operate within the usual technical constraints of coding or polished visual designs. The key word is relatively.

SPEED AND FLEXIBILITYDon’t be like this.

If a prototype is taking as long or longer to create than a finished product, you might be doing something wrong. If you’re saving time, money and effort plus creating something effective with the ability to quickly change approaches, then you’re going down the right path.

SPEED AND FLEXIBILITYBe like this.

If a prototype is taking as long or longer to create than a finished product, you might be doing something wrong. If you’re saving time, money and effort plus creating something effective with the ability to quickly change approaches, then you’re going down the right path.

MANY OPTIONSThere are many approaches to portraying your project.

The goal is a “Minimum Viable Prototype” to turn ideas into more concrete forms. You want to do the minimum to get the maximum benefit. In this case, it’s to quickly evaluate, collaborate, reference or test. To accomplish this you could use paper, a whiteboard, a video montage, a Keynote presentation, or a range of specialized prototyping tools. It’s ok to use more than one! Axure, along with iRise, Omnigraffle, Balsamiq, UX Pin, Sketch with Invision/Marvel, etc is one of the industry standard tools for prototyping.

3 PHASES OF FIDELITYOr, what’s the difference between a wireframe, a mock up and a prototype?

All these terms are sometimes used interchangeably but there is a difference. A wireframe is usually a static image of a website or app with no interactivity. It can be a high fidelity visual comp (generally called a mock up instead) but is usually more of a basic outline that included general layout and structure. A prototype involves some interaction from the user, whether it be a click thru to another view or some logic behind it as well as a higher level of visual design.

WIREFRAMEAddress basic layout and relationships

PROTOTYPEEmphasis on interactivity. Can also encompass wireframing and visual design.

MOCKUPThe visual design. There is some overlap with wireframing and prototyping via implies states

HOW CLOSE IS CLOSE?Base your prototype and approach on your intended usage.

There are different forms of prototyping fidelity according to how close they get to the final actual product. They range from low fidelity like basic sketches using a “Wizard of Oz” approach and to high fidelity cick thru Photoshop comps, interactive tools like Axure and Just in Mind and html/css/javascript working prototypes.

Within these categories they may have gradations of visual, interactive and production ready fidelity (with assets that could be used in production). Some CMSs now support such a high fidelity interface that it’s possible to create common scenarios and use what was done directly in production. That said, uncommon scenarios can be challenging if not outright impossible to prototype with them.

Sometimes it’s also necessary to adjust your initial level of fidelity according to collaborator expectations. With that said, don’t be tempted to jump in and start coding or doing high fidelity visual design. Generally, start as lo-fi as possible and scale up to reduce overcommitting at the beginning.

WHY AXURE?Pros and cons

REASONS TO USE IT.An industry standard for various teams

• Mature technology

• Desktop based so you are in control of updates

• Desktop orientation. So, best for desktop oriented sites.

• A broad ability to create complex interactions without coding

• Deep prototyping capabilities (with everything that implies, good and bad)

• Cross platform (e.g. Sketch is only for Mac)

• Reasonable pricing structures and available to the general public and students.

• Would like to generate live requirements documentation quickly.

• Incorporate basic animations in your prototype.

• You need to test fine grained interactions with users beyond click thru demos

• Scale quickly from lo-fi to medium to hi-fi prototypes quickly

• Wide range of available widgets

• Solid mastering/template system

• Generated html prototypes (albeit non production ready code)

• CSS based styling

• Dynamic panels to demo state changes easily

REASONS TO MAYBE NOT USE IT.You need to create very high fidelity click thru visual prototypes that are not flat design influenced.

• You’re designing for many mobile interactions that require many drag, swipe, pinch interactions etc. (Axure can do this using dynamic panels but it can get awkward).

• You’d prefer a more robust or timeline based animation approach.

• Difficulty importing Sketch elements.

• Your team is very Adobe or Sketch centric

• Adaptive html vs Responsive html generated

• Can be a steep learning curve similar to really knowing Photoshop

• It’s desktop based and can make remote collaboration a bit more challenging

PRACTICAL AXURE

PROTOTYPING PROCESSDo your fundamental UX work first (research, activities/personas, journeys, etc.)

1. Set prototyping expectations with stakeholders

2. Make sure your content and priorities are ready

3. Timebox your efforts

4. Stay focused on a task or story you want to test. Prototype only that.

5. Write it out. For example: As a “someone”, when I am “doing something”, I want to “something” because “something”.

6. Create a task flow or basic architecture beforehand. Discuss it.

7. Determine what level of wireframing/prototyping is appropriate

8. Sketch out a very basic wireframe first.

9. Try to do the minimum needed. No more, no less.

10. Title your pages / layouts well and decide how you’ll annotate elements

11. Reuse, reuse, reuse. Be careful of the “uncanny valley” of prototyping and the limits of your tool

12. Beware the high cost of high fidelity in terms of time, expense, effort and changes.

13. Get feedback as soon as possible.

14. The perfect is the enemy of the good.

LET’S JUMP IN AND DO THIS!The basics.

1. Pages/Folders, Elements, Element details2. Standard Graphic design tools3. Libraries and Masters4. Creating basic interactions5. Notes and Annotations6. Previewing and Publishing

TIPS AND TRICKS

AXURE SPECIFICWrite out your story on the Homepage. Link to the Starting page.

• Create a page that outlines your task. Explain the Why.

• Create folders for different versions

• Create a storage folder

• Create master headers and footers

• Name pages and order them in a rational manner

• If you find yourself doing something more than twice, make it into a Master

• Name your elements if possible. You never know when you’ll need to reference them later.

• Use dynamic panels to easily change a portion of the design. Don’t go crazy with them though. It can get confusing fast when iterating. Complexity can lead to fragility.

• Activate auto backup or use version control

• Leverage third party libraries

• Create shared libraries for your team and others

• Use event and conditional logic but don’t go too crazy. Explanations can work as well.

• Be careful of elements overlapping cross browser

• Be wary of push/pull animation

• Use inline page notes with a style that can be applied to hide them

• If you’re using an element on a lot of projects, it’s worth it to spend some time on it as a Master and add it to a reusable library.

• Beware of web fonts that aren’t included on another person’s system

• Point out how to use the Published Axshare if necessary on the Homepage

• Consider using Axure for wireframing and interactive prototyping and using style tiles or style guides for high fidelity visual references.

• Publish using the page tree reference when possible. This helps with discovery, navigation and helps to relate pages to other pages.

BEYOND THE BASICS

Advanced Conditional logic and variables

• Complex Animations

• Dynamic Panels with drag and drop

• Repeaters

• Adaptive Views

ENDING THOUGHTSAlmost there.

• How does Axure compare with other tools such as Sketch, Balsamiq, Fireworks, Omnigraffle, Just In Mind, Webflow, UX Pin, Invision/Adobe, Adobe XD, etc.?

• It has a learning curve but it’s possible to get up and running on most projects pretty quickly.• It’s a mature tool with the advantages and disadvantages that implies.• It’s one among many tools available but in depth experience in one often translates over.• Prototyping is just one step in the UX process to move conversations and mutual understanding forward.• If you’re using the prototype for usability testing over the long term, it may be worth maximizing the level of fidelity across the board.

FURTHER RESOURCESMain Axure Support

https://www.axure.com/supporthttps://www.axure.com/c/forum.php

Widgetshttps://www.axure.com/support/download-widget-librarieshttp://axureland.com/http://axutopia.com/

http://wearebridge.co/ux-tools/Axure-UI-Kits/http://www.humbleux.com/http://www.acleandesign.com/2010/04/axure-better-defaults-library-v2/

Tips

https://www.smashingmagazine.com/2013/10/ten-commandments-of-efficient-design-in-axure/http://www.uxforthemasses.com/axure-tips/http://www.webcredible.com/blog/5-mistakes-people-make-using-axure/http://www.humaneinterface.net/article/advanced-mobile-prototyping-in-axurehttps://medium.com/@jan_tomas/my-11-axure-protips-790bc41a94c9#.6il2b4ciw

Q&ARoar!