Posts Tagged "Axure"


After two successful Axure prototyping workshops in San Francisco so far this year, we have gone ahead and scheduled the rest of 2015. All in-person workshops will take place in downtown San Francisco.

Learn more about our two-day Axure prototyping workshops including links to register for each event.

We will also be offering live online classes you can take from anywhere in the world.

[maxbutton id=”3″]

Excellent Foundation For Working Efficiently

Attendees that were already using Axure have been pleasantly surprised with how many of our techniques will help them save time, effort, file size, and complexity. Come get a hands-on strong foundational knowledge of how to use Axure. Dump your newbie mistake habits!

Very Limited Capacity

In order to give people the most personal instruction and make sure everybody is following along, our in-person workshops will be limited to 7 seats per day. Come for one or both days.

We’ll do one two-day workshop per quarter. If the dates don’t work for you or the event you want is sold out, please consider bringing us in for private training.

2015 workshops will be May 14 and 15, July 16 and 17, and November 5 and 6 (piggy-backing on An Event Apart).

Axure For Everybody

Our attendees have been from consulting companies, agencies, and Fortune 500 companies. We welcome students, UX enthusiasts at all levels, as well as non-UX staff such as BAs, project managers, and product managers.

Fly In!

We have had people fly in from all over the USA for our Axure workshops. You can too! Our events are not limited to people who are local to the Bay Area of Northern California.

Can’t Fly In?

We have started scheduling series of online classes. Learn what we teach in our two-day workshops (and beyond) live and online. Join us from anywhere in the world! Learn more about our online class series.

Share This Page
Read More

Once in a while, I meet someone who is unsure about using Axure or is unfamiliar with its strengths. Sometimes people will assume that Axure is good for one type of worker or project but not for another. So let’s take a look at where Axure shines, at least in February 2015. And I apologize that I’m so biased, but holy cats, I love Axure… and offer training on it.

You Only Need Axure

Some companies I’ve worked at wanted to do wireframes in Omnigraffle and then prototype in Axure. Or they like to do wireframes in Illustrator and annotate them in InDesign. Or they like flow charts in Visio, maybe some wireframes there, and make them clickable in InVision.

One of the great things about Axure is that it can actually replace all of these tools. Axure handles flow charts/diagrams, wireframing, and prototyping. Why wireframe in Omnigraffle only to have to completely rebuild it to be an Axure prototype? Wireframe in Axure and then create an interactive version. Time saved.

Low, Medium, And High or Full Fidelity

Some people tell me they like Balsamiq because it’s easy to use and they like the sketched look. Axure does sketchy effects too. They are under “Page Styles” and you can apply your wiggly lines and hand-written fonts to all pages in your file or just some.

Axure can handle medium fidelity. But it can also handle high and full fidelity wireframes and prototypes. I have done many fully designed Axure prototypes for showing to stakeholders, user testing, and other good reasons. Just paste or bring in your image files or comps, apply interactions, and boom, it looks just like the real thing.

Global Styles

One feature I notice a lot of people missing about Axure is what Axure calls Widget Styles. You can create your own visual styles. From text to buttons to links to shapes to background gradients, these can be global styles in Axure. You then apply these visual styles to elements (aka widgets), and if someone changes minds later, you can easily globally change fonts, sizes, colors, etc… A huge time-saver! You can even create styles for hover states, selected states, and disabled states of words, buttons, or form fields.

Axure Is For Everybody

In my training world, I’ve taught interaction designers, information architects, front end developers, product designers, product managers, web producers, managers, user researchers, and user testers.

At the very least, Axure is a great way to express an idea you have and bring it to life. Everyone benefits from better communication and better collaboration within and across teams.

At the very most, bringing rapid prototyping into your process using Axure can help with brainstorming, refining ideas, communicating with stakeholders, and user testing… especially user testing. It’s great to put something realistic or semi-realistic in front of users and have them react to it.

Iterate Faster

I have heard some people say that they don’t want or need Axure because they are building prototypes out of real code. That’s great if you have the people and time to do all of that coding. The benefit there is that if the code is good, the product is good, the UX is good, and everything validates in testing, you have something that’s a step closer to implementation. If you are prototyping in Axure, that’s not production-ready code. Once everything is validated and ready, you still need developers to now build it.

However, seeing the amount of time badly burned on dev and QA on products, executions, or designs that turned out heavily flawed, I believe strongly that prototyping with Axure can be faster and more cost efficient than prototyping in real code. But there are purists who feel that’s the best or only way.

I did a hackathon last year where I was working. A dev guy had an idea and wanted me to dress it up a bit. He spent nearly two days trying to get his code and API calls to work. Within about an hour, I had a realistic-looking Axure prototype that pretended the API calls worked. He ended up showing that for his presentation.

Flexibility

Axure prototypes can be seen by anybody or anything with a web browser. Desktop, mobile web, or native apps can all be simulated in a browser. You do NOT need the Axure application or any special viewing software to interact with an Axure prototype.

You can also create your own Widget Libraries. These are like Omnigraffle Stencils but better since Axure “widgets” in a custom library can include interactions. For example, if your project uses a drop down menu with certain visual design and styling, you can create a custom library that contains the droplist including interactions (ie: what happens when the menu slides down, what happens when it slides up, etc…).

Huge Feature Set

Like any software, Axure has its limitations. But what it can do is beyond what most people will ever need. I am always shocked to go deeply into it and find things like sine, cosine, and tangent. Are people drawing parabolas?!?!? I am NOT going to need that, but that’s neat that it can do that.

It can do math calculations. It can do parallax scrolling. It can pin things to pages. It can work with data arrays (though not external data sources). It is just starting to tackle responsive web and breakpoints (as of when I’m writing this). It handles web fonts. It handles many (but not all) mobile gestures such as long press and swiping.

Community and Support

Axure has community forums where people (and Axure staff) really help each other. Nobody acts like they are competitors. Nobody is in a flame war. It’s a really nice place where you can get and give help.

Axure support are fast and amazing. Sometimes to answer my question, they will send back a little file they built to illustrate what I needed. Amazing. I should be paying PER YEAR for this software given how good it is and how amazing support is.

I’m a Fan!

I’m just an Axure fangirl. They may not be for everybody but I can’t think of a UX practice that would not benefit from Axure. From flow diagrams and wireframes (handled better than Omnigraffle, in my opinion) to clickable interactive prototyping, it’s a great and cost effective choice.

Share This Page
Read More

Our full day Axure workshop on January 22, 2015 sold out. Actually, 16 people attempted to sign up for 12 spots. Three people are flying in from Colorado!

So we’ve scheduled another live workshop for San Francisco. This will be a two day workshop on Axure prototyping.

Day 1 will cover some beginner and intermediate topics. Day 2 will cover some intermediate and advanced topics. See the event page for the agenda, pricing, location, and other details.

Each day only holds 20 people, so we expect this to sell out some time in February. Work will probably pay for this as part of professional development, so bug your boss!

For those of you considering sending 4 or more people to the workshop, you certainly can! But please note that our private training costs $2000 per day. It may cost you less to retain us for private, on-site training that can be customized to your team’s Axure level and skill needs.

Share This Page
Read More

My mailing list found out first and you’re finding out second, dear blog readers. I am holding an all-day Axure training workshop LIVE in San Francisco!

Here’s your chance to get some in-person time with me while learning many basic and intermediate prototyping techniques.

In addition to the Early Bird pricing, blog readers can get another 5% off using discount code bfblog during registration.

Capacity is 12, so start asking the boss if the company will pay. 🙂

Lots more to know! Visit the workshop page for details and registration info.

Share This Page
Read More

Understanding Axure Conditions


Posted By on Oct 31, 2014

Originally written on 31 Oct 2014. Updated 14 Aug 2016.

One of our Axure training clients asked us to create an easy reference guide for Axure conditions.

When you’re building an interaction in Axure, very often you’ll want to create conditions. Axure can then check if these conditions apply, and fire your case or bypass your case.

Many newbies find the list of Axure conditions a bit overwhelming, but rest assured they are all there for heaps of flexibility. So let’s learn what they are commonly used for (though you’re welcome to find other common or uncommon uses of your own).

ScreenHunter_164 Oct. 28 13.16

Value

Value is when you want the condition to compare two values to each other to check if they are equal, not equal, greater than, less than, etc… I rarely use this one, but I don’t deal with too many math prototypes. I also often do my math and drop the result in variables so I can easily control the information.

Examples:

  • Let’s say you are asking someone their salary and what percent of it they plan to save for retirement. You might decide that if the value of salary times the percent is less than a certain value, you’ll show them a message saying they’re not saving enough.
  • If you only wanted something to appear when people have scrolled down a certain amount, you would use a condition with value to express how many pixels down from the top they should be to see this.

Value Of Variable

This one is similar to value. The main difference is that one of the elements you’re comparing is what’s in one of your global variables.

Examples:

  • Let’s say people have to enter a salary number, you’re dropping that into a variable, and you only want certain math to be done if they entered a number greater or equal to a certain figure.
  • This could also be used for text. You might have asked someone in a questionnaire if they are male or female. Perhaps you sent that information to a variable (value of Gender variable = male). You now need to check what they responded so you can show the right set of questions on a different page. You can have a condition for if value of variable equals male.

Length of Variable Value

If you have dropped some text into a variable, this condition will “count” how long it is. I don’t use this often, but here’s an example of when I once did.

Example:

  • I was doing a banking app where when you typed “123,” it would show “$1.23.” As you typed another number, it would appear from the right and the decimal point would be in the right place. I did this by taking what the user typed, dropping that into a variable, and writing cases that split the string into some of the number before the decimal and some after, depending on how long the number was. To determine how long the number was, I used conditions asking Axure how many numbers were typed. I could then write a Set Text for $0.0X, $0.XY, $X.YZ, etc… One case with its condition for each string length.

Text On Widget

This condition is best used when you want to “check” what a user has typed somewhere.

Examples:

  • You want to make sure a field isn’t blank (not null). You can use a condition of value does not equal and then put nothing in the value. That means as long as somebody typed SOMETHING in there, your condition will be true.
  • You can make a field appear to validate by running conditions on what text has been entered. You can check that an email address field likely contains an email address by using a condition for if text on widget contains value @.

Text On Focused Widget

I don’t use this one. It’s like “Text On Widget” but instead of choosing the widget, you are saying that Axure should choose where the user has clicked the cursor, probably a form field. I tend to write very specific interactions where I might call that field by name, so I wouldn’t need a condition that’s for “wherever the user happens to be focused right now.”

Length of Widget Value

This one is similar to Length of Variable Value. The difference is that instead of operating on what’s in a variable, you’re operating what’s on a specific widget.

Example:

  • I wanted to make it look like as people typed a 140-character tweet, we were counting how many characters they had left. That meant that I needed Axure to help me know how many characters had been typed. That means I want length of widget (or variable if I’m dumping what they type into a variable, but I wasn’t). I created a condition on OnKeyUp to check if length of Twitter Textarea is greater than 140. When it was true, I had it pop up a message saying your tweet was too long. If the length were 140 or fewer, the message was hidden.

Selected Option Of

If you have used Axure’s widget for a dropdown list, and you want to write a condition based on whether people selected (or didn’t select) a certain value from that list, or a condition based on which value they selected, this one’s for you.

Examples:

  • You have a drop down menu of all USA states, but your company only does business in certain states. If someone chooses a state in which you don’t work, you want to pop up a message suggesting they contact your colleague who handles that state. You’d use if selected option of State Droplist equals South Dakota to choose if your case gets set off.
  • I once used this in a questionnaire where we used your answer to “how many moving violations have you had in the last 5 years” to decide what your follow up question would be, if any. If you answered 0, then we don’t need to ask how many of those were in the last 3 years. We know that’s 0 too! If you said you had 4, then I had to show you a follow up question with a drop down menu giving you choices of 4 or fewer; If you’ve had 4 moving violations in the last 5 years, you can’t have had more than 4 in the last 3 years. So it makes sense to keep the logic tight and only show the right follow up choices based on which answer the user chose from the drop down menu.

Is Selected Of

I mostly use this one to have Axure check if a checkbox, radio button, tab, or anything else that can be “selected” or “checked” is checked/selected or unchecked/selected. First you choose which widget you want Axure to look at. Then pick “equals” or “does not equal”… either something is selected/checked or it’s not! Finally, you’re going to pick true or false. This can be a bit confusing at first. True means it IS selected or checked. Someone clicked that tab, checked off that box, chose that radio button. False means it was either never selected/checked or they went and UNselected or UNchecked it.

Remember that for things like this, you may want to write two cases. One is for when someone selects or checks your target widget, and one for when/if they UNselect or UNcheck it. Axure doesn’t automatically assume that unchecking undoes whatever you had it do when it was checked.

Axure 8 introduced interaction events “OnSelected” and “OnUnselected,” which have made some people think they don’t need to write two “OnClick” cases, one for if it’s selected and one for if it’s unselected. I still use OnClick for these IF I want to make sure that humans touched the widget. Otherwise, OnSelected and OnUnselected could be triggered via domino effect… I check this checkbox, it unchecks that checkbox, OH Axure then runs “OnUnselected” on the checkbox that got unchecked. Did I really want that to happen without a human unselecting that? Beware of the domino effect.

Example:

  • If someone checks the “agree to terms” checkbox, you want to enable the Submit button so they can finish their form. If they uncheck it, the Submit button should be disabled again. You might start with a disabled button. You’ll then write a case enabling the button, and your condition would read like if is selected of Terms Checkbox equals value true. Just to make sure people aren’t being cheeky and unchecking that, you would also write a case for “OnClick, if is selected of Terms Checkbox equals value false,” disable that button (again!).

State Of Panel

This condition asks Axure which state of a dynamic panel is the one people can see (or would see if that panel were shown). Dynamic panels are like picture frames that can have one photo shown at a time, one “face to the world” as I like to call it. We can write conditions based on which “face to the world” people can see.

Example:

  • Let’s say you have a website design with a mega menu. When people click on certain navigation choices, a giant panel drops down. That panel has different states, one for each navigation choice. You may want to adjust the behaviour of the mega menu based on which of the states the user is seeing. Let’s say they’re looking at the Contact Us panel content, and they click the Contact Us navigation choice again. We can assume that they mean to close the panel. You’d build a condition for OnClick of the Contact Us widget hide Panel if state of mega menu panel is Contact Us.
  • In my usual lesson on carousels, we learn to “light up” the pagination dots based on which state of the panel is showing. “If state of panel Carousel Panel equals Message1,” then light up dot 1 (by selecting it).

Visibility of Widget

I use this one a lot. This asks Axure if a widget or panel can be seen. Is this shown or hidden? True would be yes, it can be seen. False would be no, this is hidden. Takes some getting used to, but if you just think it out each time you go to use it, it’ll get more comfy.

Example:

  • I use this a lot for menus, drop downs, and accordions. This is a common condition for my “one button does two things” lesson. Let’s say you have a login button and it’s going to drop down a login interface. Pressing login again would make the login slide up or go away. That means one button (login) does two things. We need to write conditions so Axure will know how to deal with that. OnClick login button, hide the login panel if visibility of login panel is true. Meaning if someone clicks the login button and the panel can already be seen, then the user must want to hide it… hide it! OnClick login button, hide the login panel if visibility of login panel is false. Meaning if someone clicks the login button and the panel isn’t visible, then the user must want to see it… show it!

Key Pressed

This is a neato one. You can actually “listen” for certain keys to be pressed, and assign interactions to happen when that condition is met. I haven’t used this one much, but here’s how it could work:

Examples:

  • The user is filling out a form. She is in a field and then clicks her TAB button. She expects to go to the next field. Your prototype may or may not go to the next or correct field. While the user is in a certain field, you could create an if key pressed equals Tab to then focus on a certain field next.
  • Perhaps you are validating fields and you do not want people to be able to type special characters. Maybe you’re a jerk forcing people to fill out forms that match your database rather than parsing what people type and making it easy on them. 🙂 Perhaps if someone types a ~ in a phone number, you want to show an error of some sort.

Cursor

I haven’t used this yet. It relies on the mouse moving to, on, or away from something. You’d also need to come up with a reason to use this rather than a more typical OnMouseEnter or OnMouseHover. I can only think of one example of this right now!

  • One of my students wanted to precisely control how long someone had to hover over a widget before a hover effect happened. For THAT, you would want to use a condition checking if the cursor is still over that widget. I say just use OnMouseHover and don’t get so fancy! 🙂

Area Of Widget

I used this one a LOT. Until Axure version 8, where I still use it but less often. In the old days, the only way to create boundaries for scrolling or moving something was by saying “if this is on top of this,” do something like not letting something move any further. Luckily, Axure 8 now has boundaries inside the Case Editor so I don’t need it for this anymore. But I might still use it in other situations.

Example:

  • If you are building sliders on a number line, you could use hotspots to act like boundaries. Think about having a number line with discreet places you want the slider to land. Someone could try to drop the slider between numbers. You can make it more realistic by having the slider move to the closest number. There are functions you could probably write for this, but I keep it visual and drop hotspots on the number line under the slider panel. If the slider gets dropped on a certain hotspot (if area of widget slider is over area of widget hotspot 4), snap the slider back to a certain point by moving it to certain coordinates.

Adaptive View

This is great for when you want conditions to only fire if people are looking at a certain adaptive view. This condition lets you choose the Adaptive View.

Example:

  • There’s a button in your design, but you need it to do slightly different things if the user is looking at the desktop view vs the mobile view. Or maybe you only want this to work in desktop and you’re not building it out in mobile. You can use a condition for the case that includes “if Adaptive View equals Base” or “if Adaptive View does not equal Phone” and write the case that’ll only work for your Base view. If that case has additional conditions, you will have to add them on and use the Boolean “and,” which means that you want ALL of these to be true for this case to fire.
Share This Page
Read More

Holy cats, we’re already 2 weeks into Q4! The year is almost over. Where did the time go.

With holidays blocking out lots of my time in the coming months, if you are looking to schedule Axure training with me for Q4, let’s get on that NOW (please).

If you are looking for remote training via GoToMeeting for just one person, you can schedule that through my online booking system.

If you are looking for on-site training, especially including travel outside the San Francisco area, open days are running out. And to make sure that I can move heaven and earth to accommodate the travel and training days, I need to book at least 3 weeks in advance.

If you’re ready to schedule for 2015, it’s never too early. I’m a plan ahead type of gal. Better to grab that time now while it’s rather flexible.

Or just get in touch if you’d like a proposal.

Thanks!

Share This Page
Read More

Yesterday was exciting and proud for me as Axure added my company to their extremely short list of recommended trainers.

axure-training

Extremely short list! We’re one of only two companies recommended for all of North America!

Many thanks to Axure for recognising my fun and dare I saw AWESOME Axure training.

Want Axure training? We’ve got it!

Share This Page
Read More

Check Out My Best Axure Work Yet


Posted By on Nov 4, 2013

Now that it’s live, I can show you some Axure work I did in mid-2013.

I did this for Traction, a San Francisco agency (love those people!). Zact needed a medium fidelity Axure prototype for user testing. They already had some ideas for layouts and functionality, so I was mostly an Axure pair of hands. I can’t claim to have heavily affected interaction decisions here. I had minor influence.

But this is my best and most complex work to date. With parallax scrolling and plenty of complicated math, this prototype stands out as some of the best of what Axure can do under version 7. And what I as an Axure Fu Master can do with it. 🙂

Share This Page
Read More

Just before 2010 became 2011, I moved from Tucson, AZ to the Bay Area. I didn’t have a Bay Area resume. Recruiters didn’t get me. Employers didn’t know why I hadn’t worked at a pile of famous companies yet. I figured I’d have to work my way up.

Through Elance, I got a very cool 6-month gig doing UX and interaction design for a Bay Area startup. I used to do wireframes in Photoshop, and I decided it was time to use something better.

I looked at Mockflow and Balsamiq, and no offence to them, but they seemed too Fisher Price. I poked around a few others, and read as many online discussions as I could about what people used. I landed on Axure.

ScreenHunter_30 Feb. 05 17.57

It seemed to win every contest for what people used. When people wanted the one tool that did the most, it was Axure. Did more than Visio. More than Omnigraffle. I downloaded it, and decided I had to learn it. I watched their tutorials, and I started learning. I had a real project. I didn’t do everything right, but by the end of 6 months, I felt close to expert.

In 2012, I got a contract at Wells Fargo where I did their iPad app as a full fidelity Axure prototype. What I couldn’t do in Axure in 2011 I quickly learned for this very complex and demanding prototype.

I was officially an Axure ninja. Or as Axure calls it, an Axure Fu Master.

ScreenHunter_30 Feb. 05 17.58

I’ve since seen iRise and JustInMind, and I still strongly prefer Axure. I can’t recommend them more highly for flow charts, wireframes, and interactive clickable prototypes. Their software is available for Mac and PC, and the files are interchangeable, which is fantastic. They have an online prototype sharing system I haven’t used, but hey, it exists.

Their support is the best. I’m blown away every time I write to these people. Not only will they answer a question, but very often, they send a file explaining what I need to do. Amazing. Above and beyond.

From small projects I pick up around Elance to big day jobs I’ve had at agencies and Fortune 100 companies, Axure is my software. Period. If you loved me, you wouldn’t make me work in anything else. 🙂 Thanks to Axure for making a great tool that makes my ideas and others’ ideas spring to life.

Share This Page
Read More