Mobile Prototyping with Axure RP 6.5

Mobile Prototyping with Axure.

Lennart Hennigs MobX Workshop 2012

Bridging the gap from paper to digital.

Hey, I made a new presentation covering Axure 7.0. Check it out!

http://bit.ly/a4m_presentation!

http://www.axureformobile.com

@LennartHennigs

I like this topic so much, I even wrote a book about it…

Today’s plan:

-  Some basics. -  Make Axure mobile-ready. -  Turn paper-based sketches into prototypes. -  Create a robust prototype structure. -  Prototype common mobile interaction patterns. -  View your prototype.

What you will walk away with…

Try it for yourself

You are here.

- Some basics. - Make Axure mobile-ready. -  Turn paper-based sketches into prototypes. - Create a robust prototype structure. -  Prototype common mobile interaction patterns. -  View your prototype.

Let’s start with some basics.

1.  Sketching & Paper Prototyping. 2.  Mobile UX. 3.  Axure. 4. Prototyping.

Sketching 101.

Why use paper?

- Speed.

-  It looks not finished.

- A picture says more than…

-  Paper and us got history.

-  It allows us to focus.

Focus on what?

Bill Verplank – Interac0on Design

The floor plan. Your app’s structure.

How to get from A to B.

How things behave.

How things look & appear.

…& its content.

But not its visual design.

Why?

- We need to understand the problem.

- We need to work towards a solution.

- With sketching we go “from Tell to Show”.

How?

-  Sketch. -  Review.

-  Look for flaws & areas to improve.

-  Get feedback. -  Show your peers. -  Even your project partners.

-  Iterate. -  Do variants on everything that people disagree on or where you are unsure. * -  Throw away or modify.

* This is important!!

But why go digital?

-  Even our pictures are not that easy to understand for non-designers.

- Describing animations & transitions is no fun.

- Certain errors are easier to find in a prototype.

h6p://de.slideshare.net/pboersma/good-‐design-‐faster-‐at-‐design-‐by-‐fire-‐2010

Leah Buley / Peter Boersma

h6p://de.slideshare.net/jacksonfox/sketching-‐for-‐design

Use a template...

h6p://speckyboy.com/2010/11/18/ul0mate-‐collec0on-‐of-‐printable-‐mobile-‐sketching-‐templates/

…and a notation.

h6p://www.linowski.ca/downloads/ISN_1.2_Introduc0on.pdf

Your result will be something like this...

…or this.

Get inspiration.

-  UI Galleries & UI Libraries. -  http://inspired-ui.com/!

-  http://mobile-patterns.com/!

-  http://pttrns.com/!

-  http://androidpttrns.com/!

-  http://www.androidpatterns.com/!

UI Patterns & Galleries Books.

Sketching & Prototyping Links. -  UI Sketching -  http://moobileframes.tumblr.com!

-  http://webdesignledger.com/inspiration/inspiring-ui-wireframe-sketches!

-  http://wireframes.linowski.ca!

-  http://www.id-book.com/secondedition/casestudy_11-2_paper.htm!

Sketching & Prototyping Books.

Mobile UX.

h6p://www.flickr.com/photos/hansel5569/6600464505/

Siemens S35i 110 x 46 mm

2000

Apple iPhone 3G 115 x 61 mm

2007

Sony Ericsson Idou 111 x 54 mm

2009

Nokia 6300 Classic 107 x 44 mm

2006

Samsung Galaxy Note 146 x 83 mm

2011

Mobiles are still (about) the same size…

1280 x 800

320 x 480

176x208

101x80

380 x 640

2000

2011

…but their resolutions changed a bit.

Mobile challenges.

-  Less screen estate.

-  Different operating systems with different UI paradigms (iOS, 2 x Android, Windows Phone).

-  Different contexts of use: -  Repetitive Now.

-  Bored Now.

-  Urgent Now.

Mobile (First).

-  This forces a (needed) reduction of complexity. -  Functionality.

- Content.

- Hierarchy.

-  It forces us to focus on what’s essential.

- We need simplicity (but in a good way).

More about

Simplicity.

Mobile benefits.

-  Touch-based interaction. -  Strong focus on content. -  Animations & transitions are used to give feedback.

-  Mobile advantages: -  Location awareness -  Media creation -  Always connected, …

Decent books on

Mobile UX.

Axure (for Mobile) 101.

Artifacts of Axure.

Prototypes Wireframes

Specifications Information Architecture

Artifacts of Axure for Mobile.

UI Flows Specifications

Prototypes Wireframes

Information Architecture

Axure for Mobile. Capabilities & Constraints.

+ Create mobile-friendly HTML. + Swiping. + Basic transitions. + View on your device. + UI Libraries for all (relevant) mobile platforms.

-  Cannot re-use the HTML. -  No long-press. -  No multi-touch gestures. -  Hard to prototype responsive

websites or orientation change. -  You need to pick and stick to

one resolution.

-  No database support. -  Axure is not a CMS.

Axure in a nutshell.

-  Page-based.

-  You can connect pages & use logic.

- Adjust the level of fidelity.

-  Outputs .html.

This is where the magic happens...

•  Display content in different states. •  Hide and show content. •  Move content around. •  Detect swiping. •  Implement drag & drop. •  Prototype transi0ons.

The power of Dynamic Panels.

Axure tip #1: Know your shortcuts.

h6p://wiYlow.com/public/files/Axure_shortcuts.pdf

Axure tip #2: Give everything a name.

Axure tip #3: Turn everything you re-use into Masters.

Prototyping.

Ask yourself before you start:

-  What parts of your design do you want to focus on? -  Structure? -  Use Cases & Scenarios? -  Interaction Paradigms & UI Patterns? - Metaphor / Behavior? - Content? -  Visual design?

-  Who is the audience for your prototype?

Prototype Dimensions.

-  Depth. -  Interactivity. -  Visual Fidelity.

-  Start easy. -  Increase the complexity based on your prototyping goals.

Depth:

Horizontal prototype.

-  Provides an overview over the key screens.

-  It’s basically a “tour of the house”.

Depth:

Vertical prototype.

-  It shows a single use case or scenario. -  It’s a spot light.

Levels of

Interactivity. -  Screen-by-screen.

-  No interactivity, you show where the user clicks.

-  Power to the people. -  Let the user click through a use case.

-  Limited set of options. -  The prototype looks complete but only certain use cases are done.

-  Real experience. -  Never try to do this! Seriously!

Go for speed and quantity in the beginning.

Create the big picture first.

Its’ not about the looks. Its about the inner values.

Do it like Pareto would: Prototype the 20% that will be used 80% of the time.

Stick to the key use cases.

Don’t get lost in Axure. Or any other prototyping tool.

Complexity will fight back.

You are here.

- Some basics. - Make Axure mobile-ready. -  Turn paper-based sketches into prototypes. - Create a robust prototype structure. -  Prototype common mobile interaction patterns. -  View your prototype.

Mobile resolutions of iOS.

h6p://www.idev101.com/code/User_Interface/sizes.html

Retina : non-Retina = 2 : 1

Mobile resolutions of Android.

-  Xlarge >= 960dp x 720dp -  Large >= 640dp x 480dp -  Normal >= 470dp x 320dp -  Small >= 426dp x 320dp

-  LDPI = 0.75 -  MDPI = 1.0 -  HDPI = 1.5 -  XHDPI = 2.0

h6p://developer.android.com/guide/prac0ces/screens_support.html

h6p://developer.android.com/design/style/metrics-‐grids.html

this is MDPI

Mobile resolutions of Windows Phone.

-  480x800 Windows 7

-  … & 768px1280 & 720x1280 Windows 8

h6p://go.microso].com/fwlink/?LinkId=196225

Using Global Guides.

Adjusting the Grid Settings. …& not the DPI.

Creating a custom grid system. “Create Guides…”

Axure’s Mobile Settings.

Beware: This is a hack!

your target resolution usually “1.0”

You are here.


Import your sketches.

1.  Get a scan app for your phone. -  iOS: Genius Scan, Turbo Scan -  Android: CamScanner, Handy Scanner, Portable Scanner, Droid Scan

2.  Scan your wireframes. 3.  Send them to your computer (sync, email, dropbox, …) 4.  Import the images into Axure. 5.  Resize them to your target resolution.

You are here.

-  Some basics. -  Make Axure mobile-ready. -  Turn paper-based sketches into prototypes.

-  Create a robust prototype structure. -  Prototype common mobile interaction patterns. -  View your prototype.

Page-based

Wireframes.

Web & PC

Page-based

Wireframes for Mobile.

Page-based

Wireframes with a frameset.

Page-based

Wireframes with a frameset.

+ Very easy… + …and very fast to do.

-  No page transitions. -  No swiping. -  You will experience loading

delays.

Properties of

Mobile Experiences. -  Gesture support. -  Animations & Transitions.

… and your prototype will be loaded in one go.

Panel-based

Wireframes. -  Create a Dynamic Panel with states for each key screen

Panel-based


-  Create Dynamic Panels for key screen and its variants

Panel-based


-  Create Dynamic Panels for key screen and its variants

-  Turn the main panel into a Master (and other key screens)

Panel-based

Wireframes.

You are here.


Mobile Interaction Patterns.

-  Events & Actions.

-  Gestures.

- Animations & Transitions.

-  Element states $ styles.

Events & Actions. - Events are part of a widget (& a page). - Number and type of events depend on the widget. - Masters don‘t have any events since because don‘t know where they are shown.

Condition Event

Case

an ELSE case (this case will not be visited if the IF case applies)

Actions

Events & Actions. -  For an event you can define CASES. - Cases can contain CONDITIONS. - Remember: TOGGLE IF/ELSE IF if you need to. (right click on an event.)

Condition Event

Case

an ELSE case (this case will not be visited if the IF case applies)

Actions

Gestures Axure does supports.

h6p://www.lukew.com/ff/entry.asp?1071

Gestures used in the wild.

h6p://www.lukew.com/ff/entry.asp?1071

Tap a.k.a.

OnClick.

-  All elements (with the exception to Dynamic Panels).

-  You could track a double tap via a variable or a Dynamic Panel.

Flick a.k.a.

OnSwipeLeft & ..Right. -  Only horizontal swiping (which is enough in 90% of the cases).

-  You could build vertical swiping via Drag & Drop.

Drag& Drop.

-  Not really a phone use case. It’s sometimes used in pad app.

-  Not convenient but it works.

Animations & Transitions. E.g. Tweetbot.

www.youtube.com/watch?v=ZBOHGzE6TNY

Animations & Transitions in Axure.

-  Move Panel (swing, linear, ease, bounce, elastic) -  Set Panel to State (fade & slide) -  Toggle Visibility ( or Hide & Show) (fade only)

Show & Hide the Splash Screen.

-  You need a Dynamic Panel.

-  Give it one state and hide it initially.

- …but invisible elements can block interaction.

-  Use the onHide & onShow events to reorder your panels.

Element States for Mobile.

Less states (compared to computers) to worry about: -  No mouse-over (rollover) state. -  Touch-only needs no selected state.*

Remaining states: -  Pressed (mouse down). -  Disabled. * Still needed for Radio Buttons, Checkboxes & Selection Groups.

How to apply

Element Styles. -  Images, Rectangles $ Buttons can contain different states.

-  Right-click -> Edit [whatyouhave] -> Edit [somestyle] Style

-  You can simply use images or apply Widget Styles.

-  Stylish elements get an interactive “dog ear”. (Try hovering over it…)

You are here.


Viewing your prototype. Where.

On your mobile: -  Default status bar -  Semi-transparent status bar (= overlay). -  Full screen On a larger screen: -  Full screen (with a device body)

Viewing your prototype. How.

Online

-  AxShare

-  Dropbox

-  Your own webspace

vs. Offline:

-  Sites2Go (iOS)

OR

-  On your device (Android)

Getting feedback.

- AxShare (for online & offline prototypes) - Convenient (built into Axure) - Way too many clicks

-  Protonotes -  Free web-based post-it notes -  Nicer interaction

Today’s plan:


Thank you!

Technology

Mobile Prototyping with Axure RP 6.5