UX vs UI

When I discussed UX and UI in the past, a lot of my friends have reminded me that there is nothing wrong with doing both. While I know some people who are actually hybrids, it’s not that common. As a hiring manager trying to find somebody who is a hybrid is very difficult. It mostly depends on which side of the UX discipline that they come from. If that person it comes from the research side, they typically know how to do wireframes, but they’re usually in Axure, and just not that pretty. Not that that should be an issue, but depending on the developers it maybe. I see wireframes that are a general placement of items. Nothing with exact placement, because they are concerned with the interaction, not the UI. The majority of developers I have worked with, take these wires and make exact placement of items based on those wires. Of course, that is a disaster. It shouldn’t happen, but it does, and often.

If somebody comes from the Visual design side, they don’t always know have to think like an interaction designer. This is where a lot of the confusions starts in the UX/UI debate. Because clients, and the general public don’t think a project has made any headway until they see something pretty, this is where the majority of people think UX starts. They don’t care about the months of user research that has been done. The hours of wireframes that were thrown away and new ones made. Everything that comes before, all the pain, is worthless in their eyes until they see it come alive through visual design, and is live.

So you may ask what’s the difference and why does it matter? If you’re looking for a job it matters quite a lot. Take my career for example. In the beginning I was a graphic designer, then I did web design, and of course I also did UI work, but I’ve been doing UX for the last ten years. I know the difference, but most recruiters don’t. When I get contacted by most recruiters, they are typically looking for a front end designer, even though the job posting may say UX in the description. It is typically the dreaded UX/UI somewhere in the title.

So what’s the difference? The general title of UX designer could mean many parts to the discipline. It could mean a Researcher, which is somebody who handles the discover phase of the UX process. They are the big brains and also have a PhD in psychology. Then comes interaction designer, who can still handle strategy and also do IA, task flows, mapping, wireframes and prototypes. Then comes the visual designer or the UI person. This person still is not a front end designer. Where I previously worked, we didn’t even have a front end designer on our UX team.

Since I am a hybrid, you may ask why it even matters to me. I do love every aspect of UX. I love the research, I love the strategy, wire framing and prototyping is a lot of fun, and I am certainly passionate about well formed code. I personally may like to do a bit of everything, but that isn’t the norm. There are plenty of people who do interaction design and have no desire to do anything visual.

I guess it comes down to the recruiters understanding the different types of positions in UX. That UX and UI have different meanings as for as jobs go. It certainly can change things money-wise as well.

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.

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.

 

Adobe Fireworks Resources

Recently I did a search of resources for someone new to Adobe Fireworks. This is the list I came up with, and please feel free to comment and I’ll add to it. Should end up a pretty great list.
I did videos for Total Training on Fireworks CS5, but everybody here already knows that. Just do a search. I think most are on youtube at this point. Greg Rewis also did a slew of them on tv.adobe.

In CS6, make sure you have Auto Save turned on here >>http://www.stuffandnonsense.co.uk/blog/about/turn_on_fireworks_cs6_auto_save

Make sure you have all the good extensions from:
John Dunning – johndunning.com/fireworks/
Matt Stow – http://mattstow.com/
Aaron Beal – http://fireworks.abeall.com/extensions/
http://fwextensions.com/
http://fireworks.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/

Resources:
http://www.webportio.com/
http://www.extendingfireworks.com/
http://www.noupe.com/design/an-explosion-of-adobe-fireworks-resources.html
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/
http://fireworkswireframingkit.com/
http://johndunning.com/fireworks/about/QuickFire
http://192.150.16.64/devnet/fireworks/articles/atv_fw_interaction_design.html
http://webdesign.tutsplus.com/tutorials/applications/whats-new-in-fireworks-cs6/ (and they have a ton of videos by Tom Green and Jim Babbage)
http://www.adobe.com/devnet/fireworks/articles/css-sprites.html
helpx.adobe.com/pdf/fireworks_reference.pdf
http://bootstrapfireworks.com/#!prettyPhoto
http://www.fireworkstoolkits.com/
http://mattstow.com/export-responsive-prototype.html
http://www.fireworkszone.com/
http://launch.fwpolice.com/
http://www.smashingapps.com/2011/09/14/40-extremely-useful-adobe-fireworks-tutorials-for-designers.html
http://fireworks.smashingmagazine.com/
http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
http://fireworks.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
http://www.splashnology.com/article/adobe-fireworks-useful-articles-and-tutorials/2489/

http://layersmagazine.com/ – Tom Green has a ton of Tutorials here, and I believe Jim Babbage has stuff here also.

Oh… and one of the few Fireworks User Groups, Fire on the Bay. Tons of recordings http://www.meetup.com/Fire-On-The-Bay/

From my previous posts about extensions:

http://www.vcarrer.com/2010/09/fireworks-mini-web-wireframing-kit.html
http://www.dragnet.se/webbdesign/websitewireframes.html
http://buchok.com/blog/?p=56
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/ (this entire post is great and *filled* with wireframing extras)
http://www.fireworkszone.com/fireworks_annotation_command
http://vector.tutsplus.com/tutorials/web-design/build-a-promotional-iphone-app-website-wireframe-in-fireworks/

http://fireworks.abeall.com

Extensions
http://johndunning.com/fireworks/
http://speckyboy.com/category/fireworks-extensions/
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/
http://fwextensions.com/
http://orangecommands.com/

That should be enough to get you going for awhile.🙂

360|Flex and MO Adobe Camp aftermath

Attending 2 conferences in 1 week is plenty, let alone speaking at both, and on different topics. Phew.

At 360|Flex I spoke on Logical Design for Developers – Design isn’t a 4 letter word, and At the Adobe Camp in Columbia MO, it was on Flash Catalyst. I have my slides up online of course, but also had some links I wanted to share with people who attended the sessions.

Flash Catalyst: http://portal.sliderocket.com/AKEGI/RealWorld_FC

and the Design for Developers one is here: http://portal.sliderocket.com/AKEGI/Logical-Design-for-developers

So below are some random notes I took while creating the slides, and the slides themselves are here —

Why design? Something that isn’t logical -at – all; empathy. Designers try and put themselves in the shoes of the user. Trying to understand how they think, how they navigate a site or an application for instance, thus the UX designer. Which is why we’ll be talking about the logistics of design, the rules, but this is an important fact we need to keep in mind.

Avoid graphical applications, except ones you are already familiar with. On twitter I see tons of devs curse Photoshop. I almost never hear them talking about Fireworks however. I know more devs who use that than anything else, which is why we’ll be using it for the majority of what we do today. If you can design with code, do so. There is nothing wrong without that, just remember some of the rules we’ll talk about here.

Play it safe. Follow the logic of design, make it usable

5 major areas
Typography
Color
Imagery
grids
whitespace

Design is just a process with rules, patterns and conventions

Acronyms – UI – UX
UI is what the user sees and controls,
UX is what the user feels (wait times, steps in a process, shifts in attention

It is important to understand the audience, who will consume the data. What do they expect?

If you aren’t sure which to pick, maybe white. grey and a color, or black and a color.

Great icons are a must – tons out there. bitbox, dryicons.com etc.

Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…
•    Avoid animation.
•    Choose images with a strong foreground element.
•    Compress your imagery but not too much!
•    Use faces, people are naturally drawn to them.
•    Avoid clipart illustrations

eyedropper for color — keep colors minimal — an all grey web page/ application can be interesting if a splash of color is thrown in.

http://960.gs/

We know when something is attractive, it is the Why we don’t always understand

Google vs Yahoo or MSN

Create an inspiration folder, just like you probably do for devs you admire

Rules for what not to do, and what to do — line height! Let your users read your text.
If we were talking we, I’d tell you 1.4 – 2.0 ems depending on your text hight of course.

Rules of thumb. column width – 2 alphabets wide

2 – 3 TOPS for type faces on a page/application/site

San serif looks better on the web for any body copy, Georgia works great as a header

http://www.otokomusic.com/web/main.html — why people hate flash sites. Good looking enough, but a very short loop guitar lick and just repeats. Obviously they want you to turn it off. I get the idea, I am at a music site. The grunge type for the navigate  just doesn’t make sense. Neither does all the tape, and the fact it is a notebook, which makes me believe it was a bought Flash site.

Type faces:

Legibility
Generous spacing
Readability
Aesthetics
Mood
Personal Choice (You just like it)
Plan your hierarchy
What have others done? http://fontsinuse.com/
Avoid Anachronisms
Avoid trite correlations
•    Don’t use Papyrus just because your topic is “ancient” in some way, especially if it’s about Ancient Egypt. (Better yet, don’t use Papyrus at all)
•    Don’t use Comic Sans just because your topic is humorous. (Better yet, don’t use Comic Sans at all)
•    Don’t use Lithos just because your topic is about Greek restaurants.
•    Don’t use Futura just because your topic deals with “the future”.
Stick with the classics

Golden Ratio
Fibonacci number
A Fibonacci spiral created by drawing arcs connecting the opposite corners of squares in the Fibonacci tiling; this one uses squares of sizes 1, 1, 2, 3, 5, 8, 13, 21, and 34; see Golden spiral

The ratio of 3:5 (or 5:3) is special to professional designers. This ratio is known as the Golden Proportion

http://goldenratiocalculator.com/

http://mobile-patterns.com/

http://www.paul-rand.com/

More links

http://webdesignledger.com/resources/8-cheat-sheet-wallpapers-for-designers-and-developers

http://www.artofthetitle.com/2011/03/14/a-brief-history-of-title-design/

http://blog.echoenduring.com/2011/03/16/usability-and-css3-columns/

Geeky design sites
http://www.logodesignlove.com/
http://www.designmeltdown.com
http://www.mobileawesomeness.com
http://patterntap.com
http://quince.infragistics.com
http://www.designupdate.com

http://www.paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/
http://webdesignledger.com/tips/getting-started-in-ios-user-interface-designhttp://www.underconsideration.com/brandnew/

http://speckyboy.com/2010/10/27/30-fresh-web-ui-mobile-ui-and-wireframe-kits/

http://www.emazekraker.biz/projects/webWireframeKit/

designingfortheweb.co.uk/book/index.php
Color theory is a lot like math – harmony, complementary (blue and orange), monochromatic, tetrad,
Additive, subtractive primaries, split complementary
colorlovers.com
kuler.adobe.com

Hope that helps someone.

Dee

Speaking at…

As conference season gets going, I am speaking at 2 conferences coming up.

In April I am speaking at 360|Flex conference. I have already blogged about this, but as it is my first time speaking there, I am super excited. In May, I am speaking again at Flash and the City, in New York.  Those of us laugh a bit about the name, because as you probably know already, New Yorkers think NYC is *the* only city.

Last year I had a blast hanging out with all my friends, and although the venue was a bit odd, there at least was break dancing. Yep, break dancing. I am doing a session this year on design for developers. It is based on my article I did for the Adobe Edge newsletter. I am typically one of the only designers (hybrid really) in a sea of developers. I also speak a lot at developer conferences and I can tell you, it won’t hurt have some developers attend my session and learn a bit about the basics of design. We’ll talk about concepts for spacing items on the page, typography, choosing colors (which alone we could spend all day) how to put emphasis on items so they are more easily read by the user. Depending on where you work, a designer isn’t always handy. There are plenty of times when the developer is the one doing many tasks. Plus it never hurts to be able to tell your boss, “Yes, I can make those changes, no need to go back to the designer for that”.

So far, I am looking forward to seeing, and hearing; Peter Elst, Keith Peters, Doug Winnie, Garth Braithwaite (who just became a UX person at Adobe recently), Jeff Tapper, Jesse Warden, Ryan (RFS) Stewart, Stacy Mulcahy, Michael Labriola,  Jesse Freeman and Serge Jespers. There will be more info coming soon on the site. Flashandthecity.com

Set your calendar for June 9-12, in New York City, NY. New venue this year, and the City part is more separated out, so there will be time to enjoy the city. What could be better than to see some amazing sessions, learn something, and hang out with these amazing speakers and get to see New York at the same time. Nothing. Come join us! (Then come to Kansas City in July 14-16 for D2W of course.)