Small but important update for my Axure Twitter Bootstrap Widget Library. It’s now got the recently added Split-Button drop-up and I’ve hosted it on BitBucket.
It’s pretty easy to jump in the deep end with Axure and start building wireframes and hi-fi clickable prototypes. But the joy of Axure is starting low-fi (use Post-It Notes) to map a user journey and then create this process flow in Axure. Following a workflow like this means you get the customer journey mapped and you easily link your Axure wireframes to business processes.
I’ve been using Axure for more than a year and it’s now my tool of choice for mapping customer journeys and user interaction design. I started out just throwing stuff into Axure and not seeing how the on-page experience relates to the customer journey.
So in the latest Axure v6.5 they’ve improved some of the tools for mapping flowcharts – but the best feature is that building a flowchart create hot-links between steps in your process and the actual wireframe.
App Maps – Detail Customer Journey by Role
For a recent project I was Product Manager / Project Manager for bespoke web-application with a CMS. This web-app has user roles like author, editors and subscribers … so each user role has their own app map.
Start be adding a sibling page in Axure and change the type to Flow — then create child pages for each of the user roles.
Add Child Pages to your Axure – Sitemap pane and drag n drop these pages into your Flow chart. You’ll see each page is automatically hot-linked rectangle with anchor points so you can link the steps of your process to pages.
Detailed Process Flow Chart
Axure has improved it’s flow diagram tools in v6.5 – We’d never expect it to have all the features of Omnigraffle or Visio – Interaction Design and Prototype is what Axure does best.
In Axure, you can easily drag n drop shapes from your Sitemap pane in to your flow diagram and then you can connect them together to make very good App Maps or business process flowcharts. When you generate your prototype, you can easily click and navigate from your flow chart to a specific wireframe.
In Axure 6.5, the connector lines have been improved – previously these lines reflowed automatically. Now you can manually adjust lines with elbow ‘joint’ connectors.
Try to make a business process flow diagram which combines the user experience as it actually is – then talk to your Product Owner or Marketing Manager to see if the user experience in anyway conflicts with actual process (or desired outcome).
For other ideas on workflow (such as naming conventions) I suggest you read this book:
Axure RP 6 Prototyping Essentials
Axure is a really great tool for generating an interactive prototype and doing something more amazing with wireframes.
I’m one step closer to something resembling the current state of responsive and I’ve updated my example of responsive design …. http://share.axure.com/VLO0IZ/
If you read anything about responsive or mobile design then check out Luke Wroblewski as he proposes 4 device screen widths to design for.
Using a centred layout with Axure you can cover ‘all’ devices larger then a 1024 / 960 grid (if that’s what you use) — so that’s 2 devices.
That then leaves only 2 designs to really work up:
- 768w (for Tablets and iPad)
- 320w (for iPhones)
If you’re not doing mobile ‘optimised’ – then you may only need 1 alternative layout 🙂
(which opens a much bigger can of worms)
I’ve been playing around with scroll spy and re-creating this effect in Axure. Now, I’ve started to tackle responsive layout and browser width.
Axure is a great tool for making wireframes come to life … seriously. When you’re building a web or mobile application you’re better off with a complete clickable prototype then leaving your client guessing.
Responsive layout in Axure
This is a bit more complex – but start with a Dynamic Panel and (using the newer Axure v6.5b) select pin to browser. Make sure you pin it on the right hand side.
Then using scroll-spy / aka crazy flicker and some image map areas – you can detect when the browser width changes.
Hints – Next Steps?
The tricky part is columns and other objects that are stuck to the page. A way around this is to use a different set of pages for the narrower widths.
What do you think? have you tried doing responsive designs in Axure?
I wanted another go at the scroll spy and sticky nav bar effect in Axure … which I previously wrote about. Reason being I like scroll spy and wanted to show a more complex and sensitive version.
Axure Scroll Spy, Sticky Nav & Pin to Browser
This latest Axure scroll spy example show
- Header which sticks at the top
- Navbar which becomes sticky when you scroll
- Buttons that change selected state while you scroll
Image Map Regions
I’ve make a lot of use of Image Map Regions to provide ‘feedback’ as you scroll. The important thing with image maps for anchor points is that sometimes they need to be positioned differently to your anchor or scroll to points. Otherwise you can find your browser unexpectedly not scrolling to where you intend.
The other point I should make is that Axure needs an OnScroll behaviour rather than needing a feedback ‘tool’ like what Paul @ Axure calls his crazy flicker.
Get the latest Axure 6.5 beta – Word Specification with OnPageLoad
I’d also like to suggest that if you have any problems generating Word specification documents that you first disable Crazy Flicker from OnPageLoad – Specifications and screenshots usually apply the OnPageLoad events. The Axure support team did fix an issue in the latest v6.5 beta which I found when using crazy flicker and OnPageLoad. So I’m only suggesting that if you find a problem with Word Specification documents – check you have the latest Axure beta release.
Creative Commons Share a Like by Attribution
Yes, it’s a free download and can be used under Creative Commons – CC-Attribution and you can use it for commercial and non-commercial projects. Just let me know please.
Are you impressed by Twitter Bootstrap? Some are, some aren’t – but I don’t know what the fuss is about – if you’ve got an amazing framework that is responsive and ready to go for your next startup – what’s not to love about it? It saves some design time and some development time.
Crazy Flicker – detecting scrolling
Following on from this post about detecting scrolling and showing nav bar changes in Axure – I thought it should be possible to create the scrollspy effect and also to change navbars.
Thanks to Paul’s suggestion of image map regions and what he calls Crazy Flicker it’s very easy to detect scrolling and move dynamic panels.
The results are great! … see the little example
How to do it?
- Make a nice nav bar in a Dynamic Panel and using Axure 6.5 new Pin To Browser set the Nav Bar to always be on top.
- Make a nice tool bar – and make 2 states – one state is the full-width sticky nav the other the toolbar.
- Make your own Crazy Flicker (a dynamic panel with an image)
- Add image map regions like top and bottom
- Programe the Dynamic Panel Crazy Flicker using onShow to detect what image map the Nav Bar is on top of and show the right dynamic toolbar state
- Generate your prototype 🙂
- No it’s not that easy – there is a lot of trial and error to get the top nav bar in front of things (watch out if you use Masters and the Navbar is in the background.
- Masters — don’t make it all work then change your Dynamic Panels to Masters – it will break all your programming
- Label everything – so when you program buttons and navbar changes, the effect shows up on the right widget!
Have you tried this?