The blog

Axure for Mobile – Newsletter #4

Hey guys,
here is the new but long overdue installment of the Axure for Mobile newsletter. This edition has everything you could ask for (so I like to tell myself): some Axure tips, a nifty app and a few useful mobile articles and resources. I hope I included something you like. Enjoy…

Keep Track of your Panel’s Active State

Axure 7 allows you to check the values of your variables in your prototype. You can see them by clicking on the “x=” icon in your prototype’s sidebar which is really helpful for debugging.

8908b05c-eb4a-4f4b-833d-890acc7ed75f
Unfortunately you cannot check active states of your dynamic panels. To fix this I use the following small trick: Define variables for the panels you want to keep track of. Give them the name of the panel with a leading underscore (e.g. “_navStack” in the above example). Then use the panels “OnPanelStateChange” event and the “Set Panel State” action to save the panels’ current states in the variables:

e4e68e68-4dc2-4ee0-953a-c41d4ccd4755
This makes debugging dynamic panels way easier. Plus it sometimes comes in handy to have a panel state’s name stored in a variable for easy access.

Enable Back Navigation for Dynamic Panels

One of the biggest drawbacks of using a dynamic panel to structure your mobile prototype is that the “back” button will not work. This was something that really annoyed me.
So I came up with a work-around, a dynamic panel that keeps track of it’s panel state changes. It allows you to navigate back from within your prototype by using a “fake” back button or hotspot.
You can see it in action in the above GIF or you can test it yourself on AxShare.

 

historyPanel

The work-around consists of two panels; one contains the different screens of your prototype (“contentPN”) and keeps track of its navigation history, and the other can be used to navigate back to the previous screen (“backHandler”).
I turned both into a master to hide the complexity and to provide events to make prototyping with it easier.

8d26da24-92a0-4557-8e52-0db6fc7bccc1

The master also uses variables to store the number of elements in the navigation history and to track whether the history is empty.
To use the element in your own prototypes you only need to place your own screens inside the “contentPN” panel of the master.

Note: This will not enable your device’s back button but it allows you to add a hidden or a fake one can emulate its behavior.

Download the .rp file and let me know what you think.

Google’s Material Design

Recently Google introduced it’s new design language, called Material Design. If you want to learn more about it, I recommend that you start with this video:

Google I/O 2014 – Material Design Principles

You can find more details on Material Design on Google’s Design page.

Your Screen’s Eerie Blue Glow

Looking at your computer screen at night is no fun. It’s hard on your eyes and my wife tells me I look like this:

2e165cfe-c203-4908-8da3-0caafe35afa1

A small program called f.lux changes this.
“it makes the color of your computer’s display adapt to the time of day, warm at night and like sunlight during the day.”
Flux is available for both Mac and Window. Give it a spin. I love it.

justgetflux.com

Mobile OS Cheat Sheets

The German magazine t3n published a short article listing different OS cheat sheets. Here are ones I found most useful:

And if you are looking for a comparison of the different UI elements check out this infographic by Xamarin.

Summer Reading

In the last couple of months several good (and free) ebooks discussing mobile topics were published. Here are my favorites:

 

And here are a few mobile articles I found useful – the first one is even about usefulness:

 

And that’s all for now. I’ll get back to you in a few weeks. 
If you have any questions, comments or other feedback drop me a line

Happy prototyping and all the best.
Lennart

The Second Edition of “Axure for Mobile” Is Out

img2Hey guys,
I have the pleasure to tell you that the second edition of the Axure for Mobile ebook is now available online.
It took a bit longer than expected because I rewrote most of it. In the beginning, I only wanted to updated some parts (mainly the patterns section and add a chapter describing the new adaptive view feature). But along the way I decided that other areas could also be improved. One thing led to another and now the book is completely revised and updated. But I hope you’ll find that it was worth the wait.

The book is (for now) available on the Kindle platform – thus it can be viewed on Android, iOS, Windows, Macs and PCs. You can read a sample chapter (or two) online.
And in the next couple of weeks I will typeset and release a print version of the book as well.

Last but not least, I decided to start a regular newsletter focusing on Axure and mobile prototyping. Please sign up for the newsletter on the bottom of the (new and shiny) front page.

Cheers and happy prototyping.
Lennart

Axure Workshop slides – MobX Conference 2012

Hey,
cleaning up my documents folder I found the slide deck of my “Axure for Mobile” workshop.
I thought, you might find them helpful:

 
Here are the topics I covered (plus the slide numbers for quick access):

  • #08 – Sketching 101
  • #30 – Mobile UX Basics
  • #38 – Axure (for Mobile) 101
  • #48 – Prototyping
  • #62 – Making your prototype mobile-ready
  • #69 – Turn sketches into prototypes
  • #72 – How to build mobile prototypes
  • #83 – How to do (Mobile) Interactions
  • #96 – Viewing your prototype

Enjoy.
l.