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.
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:
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.
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.
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:
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:
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.
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.
In the last couple of months several good (and free) ebooks discussing mobile topics were published. Here are my favorites:
- Google – Principles of Mobile Site Design
- UXPin – Mobile Book of Trends
- UXPin – The Guide to Wireframing
And here are a few mobile articles I found useful – the first one is even about usefulness:
- Being useful — a short introduction to proactive experiences
- Designing Products That Scale – The design system and style guide behind Salesforce
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.