Select Page
Axure – workflow for business process & web applications

Axure – workflow for business process & web applications

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.

HINT:

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.

HINT:

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).

Linkage

For other ideas on workflow (such as naming conventions) I suggest you read this book:
Axure RP 6 Prototyping Essentials

Axure – more on responsive designs

Axure – more on responsive designs

Axure is a really great tool for generating an interactive prototype and doing something more amazing with wireframes.

Need help with Axure? Support, Design & Training Get in contact

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)

Links

Responsive Example

Axure – Responsive layout & browser width

Axure – Responsive layout & browser width

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.

Links

Demo

What do you think? have you tried doing responsive designs in Axure?

Axure Sticky Nav & Scroll Spy part 2

Axure Sticky Nav & Scroll Spy part 2

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.

Links

Demo

Download

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.

Axure – Create Scroll Spy and Sticky Nav Bars like Twitter Bootstrap

Axure – Create Scroll Spy and Sticky Nav Bars like Twitter Bootstrap

Have you seen Twitter Bootstrap and liked scrollspy javascript? Perhaps you want to use it in Axure to create floating navbars and sticky toolbars?

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?

  1. 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.
  2. Make a nice tool bar – and make 2 states – one state is the full-width sticky nav the other the toolbar.
  3. Make your own Crazy Flicker (a dynamic panel with an image)
  4. Add image map regions like top and bottom
  5. 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
  6. Generate your prototype 🙂

Problems?

  • 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!

Links

Demo

Have you tried this?