Posts Tagged "Axure"

Sometimes when I talk about prototyping and Axure, there is someone who thinks Axure shouldn’t exist; we should all just be writing code.

Well should we? Part of the problem with answering this is that I’m not a programmer. I can’t compare my own coding work vs my Axure work. I can only compare my Axure work to programmers trying to do the same thing or something similar at the same time.

When it comes to code vs Axure, here are the factors I tend to consider.

Who’s building it? I once had a guy at a conference tell me he didn’t need Axure because he was making all his UX people and graphic designers learn code. He was very proud that all “prototypes” would end up production ready. If they want to learn code and write code, that’s great! But what if they don’t want to learn that? What if they prefer to follow their chosen career path or UX, visual design, or both?

And what if they’re bad at it? If your dev team saw the code the UX and graphic designers are writing, would they be thrilled to merge it in? It’s always great to try to learn new things but not everybody will be naturally talented or quickly skilled at everything.

And how are these workers’ time best spent? Do you want your visual designer spending X hours a day writing code? Did your visual designer have that much spare time that you can add that to his or her plate?

Which is faster to build? Can some programmer branch off the master, whip up what you need in a few hours or days, and be done? Or you show what you need to show more quickly in Axure in hours or days? Very often Axure wins but you never know! I can tell you stories of when my Axure work was days faster than someone trying to get his code to work.

I don’t have to really tie into a database, an API, or anything else. I just have to mock it up. That should be good enough for the purposes of UX design and iteration.

Where is this going? Is it your UX ideation and design process? Is it going to user testing? And after this prototype has served its purpose, what happens? Some people hope the code can head into production, which makes Axure less attractive.

When I’m the UX architect (and not a coder), it’s fastest for me to work straight in Axure. I don’t start in Sketch or Omnigraffle and then move into prototyping. I start in Axure. This helps me get my ideas out and quickly see if they are potentially good solutions or need further evolution.

I spent many years writing HTML and CSS but I prefer the visual, drag and drop style of Axure vs trying to think of things in divs and blocks.

What is the source material? You want to show leadership what you’re building but what do you have right now? Wires? Comps? Things live on the site? From what will this be built?

Sometimes, I am prototyping from screen shots. Here is what our site or app looks like now. Slice, dice, change, add… and here is what I suggest we build. I can mock that up quickly. Would it take longer to try to write code on screen shots? Again, as a non-programmer I’m not sure.

How realistic does this have to be? Axure doesn’t do real responsive design. You can’t make a browser window narrower and watch things resize and reposition as you go. Axure works in breakpoints. Here’s desktop. THUD here’s tablet. THUD here’s mobile. If it needs to look really responsive, Axure not be right. If jumping from desktop to tablet to mobile is OK, Axure might be OK.

I believe it comes down to time and resources.

I have seen projects where the spotlight was on coding. That meant that as things finally got to some user testing or review, things had to be complete re-coded. How much time would that take vs me making some changes to an Axure file… and then testing or reviewing again?

Who is working on this and do they have the time to write code? Do they have the talent and skill to write code? Do you have another resource who is coming in just to write the code or does coding take time away from UX architects and visual designers?

Try it and see.

The best way to know is to try it. I’ll always defer to real, empirical data. If your UX process goes faster with coded prototypes over someone REALLY good with Axure building in Axure, then coding wins.

But be fair. Don’t put someone new to Axure up against an experienced coder. I’ve found that people new to Axure or uncomfy with it are sometimes slow or inefficient. Get them training! 🙂

Also consider each practitioner’s process. It’s faster for me to design right into Axure and see my ideas come to life rather than pass it to someone for prototyping. It’s a better UX process to design right into a prototype rather than designing static wires and then finding out later what the interface really feels like to use. I’d rather spend my time prototyping in Axure than troubleshooting my code.

I’m still biased toward Axure, and no, they don’t pay me anything. I am just a fan.

Read More

By popular demand, we created an Advanced Axure Prototyping workshop late last year. It’s now a 4.5-hour video workshop you can take at your own pace. It’s $195.

Visit our new training website, Ptype Academy, to join this and other courses.

Advanced topics include:

  • Listeners
  • Raised events
  • Advanced use of variables
  • Math
  • Sliders on a number line
  • Drag and drop
  • Repeaters

You can also take this workshop live with us online! See our upcoming workshop schedule for dates and pricing.

Read More

Our 2-Day Core Skills Workshop is available as a video course. It includes over 7 hours of video content and over 70 lessons.

It’s available on Udemy for $150. But if you use the code PTYPE-CORE (or follow that link), you will get 10% off.

Go at your own pace, watch the videos over and over. Learn all the core Axure skills from an Axure-recommended trainer (that’s us).

You can’t get our curriculum anywhere else. We have designed our courses to move logically through Axure techniques, building slowly and teaching you how to think like Axure (rather than “just do this”).

Get yours now!

Prefer live training? We also offer private individual and team training as well as public workshops offered online and around the world.

Read More

When Axure 8 came out, many people were on fire about some of the new features. One such feature was the addition of “OnSelected” and “OnUnselected” as event triggers. To explain this in more layperson’s terms, let’s say you want ticking a checkbox to make a disabled form submission button enabled. You could now do this:

[checkbox] OnSelected
Enable submit button

Instead of the “older” way:

[checkbox] OnClick
Enable submit button
IF (condition) checkbox is selected true

People blogged wildly that everybody must now use OnSelected and OnUnselected as you will save so much time and look how easy this is. Hold on there. I’m here to tell you that in many but not all cases, you still want OnClick.

OnClick requires the human touch.

One interesting thing people forget about OnSelected and OnUnselected is that they don’t require the user to have clicked or tapped on whatever is being selected. Something could be selected or unselected because of a domino effect.

Imagine a “check all checkbox” with some checkbox choices under it. When I select that check all checkbox, all of the choice items below it will be checked, or “selected true” in Axure-speak. That means a checkbox was checked without me touching it. It was the object of an action, the recipient of an interaction.

[check all checkbox] OnClick
Set selected true [all the other checkbox choices]

And let’s imagine the converse. If I clicked the check all checkbox, all the choices became selected, and then I unchecked one of the choices, what would happen in a realistic prototype? The check all checkbox would uncheck. It would be unselected, or selected false in Axure-speak, as a result of one single item in the set being unselected. And if I decided to re-select that item, now the check all checkbox might show as selected.

Think domino effect.

That means that if we wrote OnSelected and OnUnselected for the check all checkbox, it’s possible that as that checkbox is unchecked and checked because humans are clicking on OTHER checkboxes in the item set, domino effects could happen. Let’s say you’ve built the check all checkbox to unselect all the items when the check all checkbox is unchecked… and you’re using the new OnSelect.

[check all checkbox] OnUnselected
Set selected false [all checkbox items]

That means the following process could happen:

  1. Check the check all checkbox. All the items become checked.
  2. Uncheck one of the items. The check all checkbox becomes unchecked (since all aren’t selected and we’re building something realistic).
  3. Domino effect: EVERYBODY gets unchecked.

Why? Because OnUnselected doesn’t require a human to have clicked on the check all checkbox to start the prototype action. It only requires that it be somehow unchecked… via human or via the object of another interaction. This is where you get some unintended domino effects.

I still use OnClick where I want to make sure humans clicked or tapped.

That may seem old school but it’s the correct way to build when you care about domino effects. Do I want something to happen because this checkbox was unchecked by humans or by domino effect? Or do I only want something to happen when humans click and NOT from a domino effect?

Hopefully this made some sense and you will use OnSelected and OnUnselected carefully!

Read More

There’s a new video series in town and it’s the only one in English from an Axure-recommended trainer.

Our Axure 8 video series is now live and available for purchase! It’s been a secret, but last year, we connected with O’Reilly to write and create a video series to each Axure 8. It’s finally out today!

It’s only $149.99 USD and is available as a streaming video or DVD. It’s 16 chapters, 79 lessons, and over 9 hours of content. Pause as you need to and work along with me!

Visit to hit O’Reilly’s page on this product and make your purchase.

Works for Axure 7 too!

Axure 8 has some new features that aren’t in 7. The UI of the program is also a bit different. But if you are on Axure 7, you’ll be able to use the techniques in nearly all of my lessons. A few lessons won’t be relevant to Axure 7, but nearly all will.

Enjoy and spread the word!

Read More

Hello, Canadians! We are one of the few Axure-recommended trainers on the planet. We have already been training some Canadians, but we figured we’d shout it out publicly since we are getting more and more interest from your country.

We can train Canadians in a variety of ways… pick the one that works best for you or your team.

  • Live and on site. We will fly to you and run our usual curriculum or a custom training plan at your location. We charge a day rate plus reimbursement for travel expenses.
  • Live and online, remotely. We use Join.Me or can use your remote conference setup for training individuals and teams. We charge by the hour only for hours needed. No travel expenses! No VAT since this is a service taking place in the USA.
  • Live at one of our classes. We hold multi-day prototyping workshop intensives in San Francisco a few times a year. You can register and fly in for our Axure training. No VAT since this is a service taking place in the USA.

Please contact us and tell us about your specific training needs so we can put together a proposal. Proposals are free and there is no obligation.

Read More

There are outside companies and people that offer libraries you can bring into Axure. These widget libraries might be free and some are paid.

I’ve been shocked to see that some free and paid ones are poorly constructed (and I’ll explain how momentarily). I’ve asked Axure what they do when they see someone create a “bad” library. They told me they contact that person and suggest they improve it. They said very often, that person doesn’t improve the library… they just lower the price (or keep it free).

That means there are BAD Axure libraries out there. Libraries I don’t like. Libraries Axure doesn’t like. I’m going to pick on one as an example of what makes a library bad and why you’d want to not buy it (or ask for your money back if you see something like this in a library for which you paid).

Global Widget Styles

For years, Axure has had a handy feature that allows you to create global visual styles for lines, shapes, buttons, text, backgrounds, etc… That way, if you want all of your buttons to look the same, you apply one global style. If someone decides later to change the way that button looks, you just change the global style and they all fall into line.

The opposite of this is styling things manually in Axure, widget by widget. Going to a button and manually choosing font size, colour, background colour, outline colour, etc… If someone later wanted all your buttons to be another colour, you’d have to find each button and change it by hand.

Using global Widget Styles makes sure you are never in that pickle!

Some Axure Libraries Don’t Use Widget Styles

Using Axure widget styles can future proof things and make styling so much faster and easier. Yet I find that many people don’t know about widget styles. Still, that’s not excuse for offering and in some cases selling a library that uses no styles.

Here is an example of a library produced by someone who isn’t me and isn’t Axure.

ScreenHunter_1095 Oct. 11 12.19

This looks like a nice button you might want to use over and over. It’s set up to be a blue button and it has a mouseOver style and mouseDown style (see the middle of the right side for those styles).

However, we can also easily see that it’s not using global widget styles. We know this three ways:

  • With the button selected, look at the top left for the droplist that shows which global style is on this button. NONE. It says “default.” That means this button is not using a global style.
  • Look to the right in the middle pane to see the Interaction Styles. MouseOver shows hexadecimal codes. If there were a global style there, we’d see the name of it. Under that is the MouseDown style. We see manual formatting like does it have a shadow and what are hexadecimal codes for colouring. Not a global style.
  • Open the Widget Style Editor (pictured below). Notice there are NO custom styles. That’s because the guy who built this library built NO global styles.

ScreenHunter_1096 Oct. 11 12.25

If you drag this blue primary button all over your project and then decide later you want the button to be another colour, get ready to go through your whole document, find each button, and change the styling manually. Want to change those interaction styles later for every time you used this button? Find every button and change it manually.

I can’t believe someone can sell that or give it away.

That’s not fair to you. At that point, what have they really built? They’ve made something worse than you could have made yourself. What’s the point! How long would it take to fix? Probably a few hours.

This is not just in this library. It’s in others as well. I would either forget about these “bad libraries” OR make sure you first spend what could be hours to redo all the manual styling as global styling. Why the guy who made the library wouldn’t do that, no idea. But just because he’s lazy and doesn’t believe in best practices doesn’t mean you should follow along! Be and do better!

What would it look like if this were done correctly?

How can you know if a library item is using global styling (potentially correctly)? See this screen shot:

ScreenHunter_1097 Oct. 11 12.27

Here’s I’ve applied three global styles to this button. One is the button in its default state (Primary Button, seen in the droplist on the top left). The others are the MouseOver and MouseDown seen on the right side, one style for each.

And then you’d want to see secondary buttons styled separately. Headlines styled separately. Text styled separately. Warnings and messages styled separately. Everything in Axure can have global styles. It’s nearly a crime to not use them. It’s doubly a crime to not use them and sell what you made to others as some sort of awesome starting point.

Buyer beware!

Read More

We train people on Axure. We are one of the few trainers recommended by Axure on the planet! And proud of it.

There are other trainers, recommended or not. Sometimes we take a look at their lesson plans… and we’re always surprised by them.

It looks like trainers believe they must teach you every key thing Axure can do in one day. Given how much Axure can do, this is likely to cover too much too narrowly in too short a time.

Typically these curricula claim that in one day, you’re going to learn the environment, masters, dynamic panels, forms, variables, conditions, Axure “logic,” widget libraries, adaptive views, and Repeaters. Can that really be done? If you’re coming from a development background, you might be able to learn nearly all of Axure in one day.

Most of the people I’ve trained the past few years aren’t developers.

Why not? Because developers figure out Axure well on their own and generally need little training. The people who come to me for training were sometimes confused by Axure the moment they opened it. They don’t have a programming background. They often have art backgrounds and haven’t had to think of things in terms of logic or processes where the order of things matters.

I’m not saying that all art school people have a hard time with Axure. Some fall into it easily! Many don’t, and that’s OK; it’s why we’re here.

We teach you how to think like a programmer and stay a designer.

We’ve broken core Axure training into eight lessons that take 1.5 – 2 hours each. We start with understanding the software environment (menus, panes, toolbars). We fully cover masters and Widget and Page Styles, which are life savers. We then go into forms using standard Axure widgets and forms when you’ve custom designed the elements.

Not only is that a great lesson for people who like higher fidelity prototypes but it’s also a core skill that you’re going to use in many of our following lessons. Once you can build a custom droplist from scratch, you’re on your way to nav menus, mega menus, accordions, and other standard elements that use similar approaches.

We teach progressive disclosure, setting text, beginner-level variables, and iFrames. We hit adaptive views at the end but don’t go too deeply into prototyping for mobile. That and other lessons like having Axure do math and building “listeners” (automatically running processes) we consider to be add-ons for students after they’re comfy with the foundation lessons.

Nothing gets the quickie version when we teach it. Students are taught how to think out, step by step, each interaction they want to build. Rather than show you, “Here’s how to prototype a website,” we teach skills and approaches so that you can learn to make Axure do whatever you want.

That means we take you from newbie to intermediate in two full days.

That’s 16 hours including breaks. Our video version of the same course runs over 7 hours (but there are no breaks and I move a bit more quickly on the assumption you will pause or re-watch if you need to). That’s also without time to stop and help troubleshoot people’s common mistakes.

That gets you up to a confident intermediate prototyper. 16 hours. And then you need to use those skills and practice! Please!

We don’t teach you Repeaters unless you have a note from your doctor.

Repeaters are neato and powerful. They allow you to build “real” data into Axure (think mini Excel spreadsheet with text and/or images) that you can then manipulate. Pretty neat, right?

And also often unnecessary. We used it for an eCommerce prototype because the client insisted that when someone clicked “Add To Cart,” the EXACT item they chose showed up “for real” in the shopping cart. Would the prototype have been “worse” or harder to test if Lorem Ipsum showed up in the shopping cart?

Someone emailed us recently thinking he needed to learn Repeaters because he was going to have rows of data added, edited, and removed from an interface. Well, you could learn Repeaters but they’re rather complicated. Can this just be faked out? Can you have adding a row show a hidden row? Deleting that row removes it and moves the ones underneath up? And you only build certain rows to delete so that the prototype always looking like it’s perfect?

It will be faster and less hassle to build the “fake version.” It might even be fine for user testing. Consider saving your time and “faking” it instead of building Repeaters. Repeaters aren’t the wrong choice. They’re just a tough thing to learn for most people.

I tell students it will take you a half day to wrap your head around Repeaters and then most of the week to start to feel like you get them. I once taught them to a really sharp UX guy, who seemed to pick it up well. At the end of the week, I asked how it went. He said it took him a half day to wrap his head around it and most of the week to just get it to start to work they way he wanted.

Which means I have NO idea how people are teaching it fully as a small section of a full day workshop.

When choosing an Axure trainer, consider the background and comfort of students.

Are your students all developers? Then nearly any trainer will do. 🙂

Are your students artists, visual designers, UX practitioners, managers, business analysts, or product managers? You probably will want to look at Axure training that doesn’t try to pack it all in a day. You may think you are saving time and money on a one-day bootcamp or workshop. Ultimately, the real measurement of that is how much your students learn and how independent they feel after that class.

Our workshops are two full days. We also offer private training on your site or over the internet. Private training is customized to who your team is, what they need to know, and the pace at which they go.

Read More

A question we get a lot is, “How do we create custom Axure widget libraries?” These are often for a company, a team, or a product.

If you’re more familiar with Omnigraffle than Axure, widget libraries are like stencils except they can be completely interactive. You can build custom droplists that drop, get selected, and slide back up. You can build accordions that expand and contract. You can build buttons with hover states.

Axure’s custom widget styles allow you to style text, buttons, shapes, backgrounds, and lines. In addition to their “default” versions, you can build mouseOver, mouseDown, selected, and disabled styles for each widget.

Widget libraries are self-contained files that can be shared and brought into any copy of Axure, Mac or Windows.

Custom Widget Libraries Save Time and Money

This makes a custom widget library a fantastic tool, especially where multiple workers are in the same file, on the same project, or would benefit from pre-made building blocks.

Instead of hoping that staff build things the same way as each other, grabbing elements from a library will allow for easier standardization.

What About Free and Paid Axure Widget Libraries?

There are free and paid widget libraries out there. Some aren’t so bad. But we’ve been surprised at the poor quality of some of the paid ones. Widget styles weren’t used correctly or at all, leaving you with extra manual work later. That’s money not well spent.

Curious about a custom Axure library and styles for your client, project, or company? Get together a list of your components and contact us for a free proposal.

Read More