mobile prototyping with axure rp 6.5
DESCRIPTION
Bridging the Gap From Paper to Digital This is a condensed slide set from my Mobx Conference 2012 Workshop. For more details take a look at: http://www.axureformobile.comTRANSCRIPT
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.
- 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.
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
Wireframes. - Create a Dynamic Panel with states for each key screen
- Create Dynamic Panels for key screen and its variants
Panel-based
Wireframes. - Create a Dynamic Panel with states for each key screen
- 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.
- 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 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.
- 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.
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:
- 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.
Thank you!