Top Banner
Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: - Sign attendance sheet - Get a copy of working file from USB drive
22

Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Jun 20, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Axure RPiSkills Workshop

Evan MoirWinter 2019

Before we start:

- Sign attendance sheet- Get a copy of working file from USB drive

Page 2: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Who am I?

Page 3: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Join the ACORN Student Advisory

Help us with research & usability testing!

[email protected]

Page 4: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Agenda

- Basic Concepts

- Basic functionality- Widget properties and styles- Dynamic Panels- Masters- Interactions

- Advanced functionality- Variables- Complex input forms- Repeaters

- Mobile prototyping

- Best practices

Page 5: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 6: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 7: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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!

Page 8: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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.

Page 9: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 10: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 11: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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)

Page 12: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 13: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 14: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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!

Page 15: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 16: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Why mobile prototyping?

It’s better to test in context, i.e. on the device

Page 17: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 18: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 19: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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

Page 20: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

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!

Page 21: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Feedback

[email protected]

Page 22: Axure RP - Inforum Library · 2019-04-01 · Axure RP iSkills Workshop Evan Moir Winter 2019 Before we start: ... CSS, Javascript), no real coding required. Fundamentally different

Join the ACORN Advisory Team

Help us with usability testing!

[email protected]