UX

Workflows

I can’t tell you how many UX people I know, don’t use any Adobe products. Yeah, seems crazy to me too. And, the really crazy part is they seem proud of it. If only they knew how productive they could really be with Adobe products.

Illustrator:
Thanks to artboards, this has “almost” replaced Fireworks for me. I said, almost and only because it is vector and doesn’t crash as often as my beloved FW does. I can easily use AI to create IA’s and task flows. Honestly, AI is just as easily as Omnigraffle. I just create some graphic styles, some paragraph styles, some symbols and thanks to the built in arrows in Strokes, I am ready to create almost anything. There are some nice wireframe kits for Illustrator out there, so that makes it easier to create really nice wires. I just wish there were more kits out there.

Creating reusable buttons in AI is a breeze. Here are the steps.

Add the text to the page you want inside your button. > Open the Appearance panel and add a new fill, then pull that under the characters in the panel. > Add a FX > Convert to Shape > Rounded Rectangle. Change those setting to what you need, change the fill color. If you’d like to also make that a Graphic style, feel free so you can make it over and over again. Then, add it to a library so you can share it. Now, it can have any text and it will always look the same.

Makes doing buttons a breeze instead of how I see people do them the hard way. Rectangle, then adding text on top, and then having to change the rectangle size every time you change the text. Ick.

Update: Since I originally wrote this, Creative Cloud now has libraries. InDesign, Photoshop and Illustrator. This makes a difference because you can not only share them between those apps, but between your team members. Making the “workflow” portion of this post more appropriate. Graphics, text styles and colors are what you can save/share through the libraries.

The only things that stop me is I can’t make clickable wires right there in AI, and it has maybe the worst slicing tool ever. But, it is easy enough to throw them into InDesign and add the buttons. AI, I still love you regardless.

InDesign:
Eight Shapes first introduced me to using ID for wireframes. Their kit was fantastic, but they have moved on to using HTML. I still say ID has its place. Of course it is also a vector tool. One or two things though that set it a part. It has interactivity. Super easy to create clickable wires. It also can simulate animation, so that is amazing. With the ability to also change the page size, it makes this a contender for multiple portions of the UX world.

Dreamweaver:
I hope by this point you’ll notice I have said nothing about Photoshop. It has its place in life, and no place in the UX world for me. Dreamweaver however is still great for creating prototypes, and wireframing. If you are adept at code, then like myself, I find wireframing a responsive site easier in the code. DW makes it a breeze.

Muse:
I am pretty well known for my initial dislike of Muse, but for prototyping, I can put together something for testing in just a few days. I can add interactivity from Edge Animate, and copy and past my own HTML into the pages. The way it creates a site map is awesome. I may not be a fan of using it to create code ready HTML, but like Flash Catalyst was, it makes a great wireframing and prototyping tool.

Edge Animate:
Animate is a great tool and could certainly be a great tool all alone. I could easily use it to wireframe and prototype without anything else. It is fantastic however with Muse and whatever. Easy enough if you have ever used After Effects. Nice thing for me, it also feels a lot like LiveMotion from a many years ago, and it really is easy to use.

Flash:
Yes, Flash. I have used this to prototype with, and with great success. Sometimes the interactions you need to test are complex, and Flash makes that easy. Forms, no problem. Animations… that makes me laugh. Turn into HTML, yep. I’m an old Flash chick, so using Flash is like when you drive home and you can’t remember getting there. It is easy to pick up that old friend and get things done fast.

Edge Reflow:
If you are doing a responsive/adaptive design and not using Reflow, shame on you. The beauty is it can be wires or the actual design. I really believe in creating breakpoints based on when the design literally breaks. I’ll do an in-depth tutorial soon so it will be clearer, but I love the tool.

I don’t know the state of this tool. It may be going away.

Edge Inspect:
I couldn’t live without Inspect. It allows me to see my work on actual devices. Same network, app on device and Chrome extension and those are the ingredients to test away. I once saw 37 devices connected. So easy to test with because you can use both the browser, and the device.

I did a presentation for Adobe on this topic. Here is the link.

Of course, I am not saying other tools are worth using. I use Axure on a regular basis and have done PLENTY of prototypes with that. InVisionApp, UXPin and anything else of course has its place, but if you already use Photoshop or whatever, and have Adobe CC, I think you’d be amazed how they can fit into your UX workflow.

Advertisements

Creating Prototypes for testing

One of my job responsibilities is to create the prototypes for testing. Sometimes it is me, sometimes it is one of my team. They are all used however for testing. I run a UX user group, and we recently had a meeting about tools for UX. A lot of prototyping tools were mentioned. I’ll write another post about the tools of the trade soon, but there are already a lot of options and articles about the tools.

To start with, I bet a lot of people who have never done that before know it takes upwards of 4 weeks to get a test on the books. Where are the users going to come from? What do they need to know, what product(s) do they need to have used, and so on. Who will conduct the test, who moderates, what software will you use to capture the testing? So many variables. Lighting, computers, servers, speakers, one-way mirrors and more.

Creating a prototype for testing means creating smoke and mirrors illusions. It is all about the interactions, and what level of interactivity the tester and product owner needs from the prototype to get the information they need from the users. What we use to get that information doesn’t even matter.

The first prototype my team did was in Axure. A mobile prototype. Then I did my first one in Flash, based on a wireframe. I had a blast creating that one. So much grief deciding on Flash to start with, I had tried HTML, but the interaction was too complex. Then I thought Muse, nope. Fireworks, no again. InDesign interactive saved as a SWF, and no again. I actually spent a lot of time on those, and a disaster all based on the level of interactivity I needed. I finally finished and was happy with my Flash prototype.

Since then we’ve done HTML, paper, Axure several more times, Flash Builder, Muse and I am still trying to decide on the next one. This one now is tricky. Turns out iOS turned tricks on us, and you can’t get rid of the browser window on an HTML prototype any longer, past the home/index page. Janky move Apple. So, I am now trying different things out which will probably involve an app on the phone side to display the prototype. This one also involves lots of form fields, so I couldn’t use something that just creates hotspots.

So again, how the user needs to interact, rules. We’ll see what I find to create that prototype that emulates a native application. So many choices out there, surely I will find something suitable. Will keep you updated!

UX Roles and Responsibilities

I’ve been a UX designer and a UI developer for a long time. I’ve decided to start new blog posts about those experiences.

For the last several years, there have been a huge number of jobs around UX. In reading the posts, it is obvious they don’t really understand what they need. I see a ton of generic UX skill sets being posted. “UX designer who can research, create wireframes, do visual design and be a front end developer. WHAT? No, that isn’t how it works!

User Experience as a separate practice from web or mobile design isn’t all that old. One practiced what we call UX now but the title you had as a job was probably something like designer, or researcher, web developer, front end designer and so on.

Before we can move forward with other posts, we have to get the business of what, who, how and when out of the way.

Roles and responsibilities

This is something that even my own team doesn’t seem to understand. When I see the job posts, it is clear someone doesn’t understand. I’ve been a hybrid for a long time, meaning I design and develop. I ran a conference for 4 years on that very topic, but the UX world isn’t that easy. Being good at one aspect of UX doesn’t mean you are, or can be good at another aspect.

Researcher/UX Strategist

Typically a PHd or the very least a Masters. Could be in Psychology, could be Human Factors, but these are the big brains. They find the data the company has, or they create ways to extract the data. They are the ones who create personas, or Behaviors and make sense of who the user of the product is. They are also the front line when it comes to understanding the customer lifecycle and know how to put all that data in a way that clients understand it. They are the ones who ask for the business plan, they make the Experience and journey maps. They are also the ones who make the design plan for the rest of the team to follow.

To truly understand what the customer needs, and to sort through all that data takes months sometimes. This portion of the UX world is sorely misunderstood and I see people all the time dismiss this as something they don’t need. Yes, sometimes it is expensive to have someone like that on a team, but they are indispensable. The time they take is time well spent. It is just because so many companies, like the one I work for, always had the Product managers and the BA’s do that portion of the design. It isn’t the same, but having a Product Owner understand the data is awesome.

Often these are also the people who facilitate the user testing. Focus Groups, usability testing, and facilitating those tests isn’t easy. You have to be trained, period, in how to ask the right questions to get the answers you need instead of something you can’t use. I’ve watched plenty, and I am telling you, I know I couldn’t do it without a lot of practice.

Interaction Designer

This person makes sense out of data as well, but moves it to the next stage. Information Architecture, Information Analysis, task flows, more detailed Experience and journey maps, spec docs, wireframes all happen or start here. Could a UX Strategist do this? Sure, but most of the ones I know couldn’t draw their way to a decent wireframe in Axure or tool of your choice, to save their soul. But, the role of the interaction designer is to format all that data in a way that it makes sense to the client. All the pieces I mentioned above, it pains me to say that clients don’t appreciate all of this either. They seem to get wireframes, but not everything else. So in your Design Plan, you should list them all, but you don’t have to put dates to everything, so they get what they want, but you can still do what you need to get where you need.

Can an Interaction Designer manage the data? To a point, but these people have been trained in ways a typical Interaction Designer isn’t. A researcher could more easily also create all those things listed. The wires, and IA and flows, so if one wasn’t needed, it would be the Interaction designer.

Visual Designer

This is where typical jobs think things begin in the UX world. It is something they can understand. It is also a place most clients think things begin as well, for the same reason. Everyone can connect with colors, images, icons, logos, graphics and fonts. When a client sees a wireframe, they are often still looking for a look and feel, and in the slightest details they are looking at the shades of gray and if you put ANY color in somewhere, they see it as a final color. So it isn’t surprising they are impatient to see what the visual design for the project will look like.

As a manager in the business, it is still difficult to get the right visual designer inside the UX team. I’ve had previous print people design something for the web, and I get inconsistent spacing, tracking, kerning and someone who just doesn’t understand the web. Mobile designers, forget it. Almost impossible it seems to find the right people. Maybe it is just Kansas City. Maybe all the talented people have moved out of town. I am just kidding, I am sure they are out there, but they are fewer and farther then I’d like.

This UX team members job is to not just make things pretty. A common misconception from the Product owners, all the way to the President of the company. They often further the interaction design. They make the spec doc from their visuals for the developers to follow. They’ll make the annotated wireframe sometimes, and depending if the team’s members stop here, sometimes they also make the assets for the developers.

The line is often blurred with the things Interaction, Visual Designers and Design Realization/UI Strategists/Front end developers do. As a hybrid, I can tell you first hand, that unlike many of the job posts I see, many visual designers are not hybrids, and can do visual design, but not always are they that great at CSS3, and HTML5, and Javascript and know about every framework out there.

Front End developers, UI Developers, UI Strategists, Design Realization

So many names. Interaction Designers seem to forget about these people. I know a ton of Interaction purists who ignore the UI folks, not deeming them a part of the UX team. The second you forget about this part of UX, you have also discounted the developer. Often they are the only real liaison to the dev. And, the second you discount the developer, you have a crappy product. The person making the wireframes knows what the persona wants, they understand the data, but they don’t have knowledge of the back end of the product like the developers do.

I started speaking at developer conferences in 2006. I was often the only designer at those conferences until somewhere around 2009 or so. My first D2W Designer/developer conference was in 2010. It was born from a frustration I saw where designers complained about developers, and developers complained about the designers. These people didn’t often talk. If you look at websites and applications from that time period, you can tell! Things didn’t work as well as they could have because of it.

In the UX team, this person can have multiple roles. They can help the dev teams get up to speed on new technologies. They can make the assets and the spec guides for the designers. They can help with the adaptive layout of the new website. They can also help make the graphics like icons and things for the mobile world where multiple sizes are needed.

On our UX team, they are the ones in charge of all the prototyping as well. We often have complex interactions to test, and we test a lot. We have many, many products, both for digital and retail. Testing is essential, and getting the right interaction in front of customers to test is also essential.

In the days, weeks and months to come, we’ll explore all aspects of the UX world. I hope you join me.