Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: - Sign attendance sheet - Get a copy of working file from USB drive
Axure RPiSkills Workshop
Evan MoirWinter 2019
Before we start:
- Sign attendance sheet- Get a copy of working file from USB drive
Who am I?
Agenda
- Basic Concepts
- Basic functionality- Widget properties and styles- Dynamic Panels- Masters- Interactions
- Advanced functionality- Variables- Complex input forms- Repeaters
- Mobile prototyping
- Best practices
What is Axure?
Axure allows you to create interactive prototypes out of real web code (HTML, CSS, Javascript),
no real coding required.
Fundamentally different from basic wireframing or image generation tools (Balsamiq, Sketch,
Adobe Illustrator)
Prototypes can be data-driven
Individual pages are exported as actual HTML pages, can be opened in a browser
Styles
Change all visual aspects of widgets
- Placement, alignment
- Headings/text styles
- Sizes, shapes
Manage your styles and re-use them!
Use the built-in interactions styles
- Click states
- Selected
- Enabled/Disabled
Properties
Properties let you control the state of the widget. Some are tied to visual appearance:
- selected/unselected
- enabled/disable
Different widget types have different properties available in the inspector:
- Drop-down lists
- Checkboxes and Radio buttons
- Input fields
If you’re ever unsure what a widget can do, look at the properties!
Dynamic Panels
- Dynamic Panels can have multiple states
- Each state can have an arbitrary number of widgets
- The state of the panel that’s being displayed to the user can be controlled by any
interactions assigned to any widget.
Interactions
The UI is always listening!
The inspector will show you which interactions are available for the chosen widget.
Many different interactions, related to:
- Widget loading
- Sizing, position and visibility changes
- Mouse, keyboard and touch events
- State changes (dynamic panels, text fields)
- UI focus changes
Conditional Interactions
Conditions will be evaluated when the associated interaction happens
Sets of interactions can be:
- IF/THEN chain - first satisfying condition will be realized
- All IF - each condition is evaluated, all satisfying conditions are realized
Tab Order
When creating form prototype, preserving a user’s ability to tab through the form is key
- Place all form inputs together in the Outline
- Put them in reverse order
- Name them! (this will prove useful later)
Variables
Global variables
- Available to be referenced or changed from any page of the prototype
- Persist as long as the prototype is running
- Careful - once you get to 9-10 global variables, prototype slows down
Local Variables
- Temporary variables created for a specific process
- Can reference other values on the page - e.g. text
Single Page Application (SPA)
- Why SPA?- No loading between screens- Less reliance on global variables- Smooth transitions between states, including animations
- Downsides:- Added complexity- Long initial loading times- There’s a performance limit
Repeaters
Repeaters are the key to prototypes that behave like data-driven apps.
Basic concept:
1. Data Tablea. Structured set of fieldsb. No data types, just text
2. Widget Templatea. Set of widgets that will be repeated once for every entry in the data tableb. Includes interactions!
Repeaters
Built-in functionality:
1. CRUD
a. Create
b. Read
c. Update
d. Delete
2. Filter by any field/column - data type interpretation is defined here
3. Sort - data type interpretation is defined herea. Numericallyb. Alphabetically
Why mobile prototyping?
It’s better to test in context, i.e. on the device
1. Dragging content up and down (not scrolling). Bonus: bounceback effects at top and
bottom
2. Smooth transitions that convey spatial relationships between screens. No page
loading!
3. Redundant interaction options (e.g. swiping back AND tapping back arrow AND
saving to return to previous screen)
4. Effective layering - global elements persistent and docked to the viewport
5. Make tap targets as large as possible
Dragging Interactions
Only dynamic panels have drag interaction
Drag can be restricted to a single axis
Dragging on one widget can move a different widget - this is key to understanding mobile
prototyping
Don’t forget to define boundaries!
Don’t forget to define what happens onDragDrop
Mobile: Exporting & Device Preparation
1. Export settings: hide browser navigation
2. Upload exported files to a server
3. Visit prototype in your testing device’s browser
4. Save the link to device home screen
Best Practices
- Leverage the tools, don’t re-invent- Interaction styles- Disabled/enabled- Build-in animations
- Organize your prototype- Groups- Naming is important!
- Think like a programmer - re-use as much as possible (DRY)- Masters- Define and re-use styles- Find a good library, or build one
- Plan before you build
- Look for online tutorials on the Axure site!
Feedback