Posted by Kori Handy
URL: http://uxuibootcamp.blogspot.ca
10 Quick steps to kick ass UX:
UX is a broad term used to explain all aspects of a person’s experience with the web/mobile application including the interface, graphics, industrial design, physical interaction. It is also referring to the application of user-centered design practices to generate cohesive, predictive and desirable designs based on holistic consideration of users’ experience. In most cases, User experience design fully encompasses traditional Human-Computer Interaction (HCI) design and extends it by addressing all aspects of a product or service as perceived by users.
Essentially we make shit easy to use by collecting data (educated guessing) to predict and decide the user flow on the application for a specific task. When making these assumptions a few things to keep in mind
a) Environment device or app is used in
b) Users have different needs or time constraints with different devices, times of day or location, even mood plays a role. If I am sitting at home doing nothing but surfing the web on my giant 32 inch monitor, I have nothing but time and I am an easy target so to speak. The problem with this user is nothing at all; in fact 99% of us are this user at some point in a day. Generally we don’t build for these users because they can be satisfied easily, mainly due to the fact they have time to dig around your website to use most of the features. We design for the people on the go, people new to technology , we want to enable people to use your products on line right? When I am building a new web/mobile experience for a client or with one of my own projects, I take the following steps to get me ready and focused.
1) Ask a ton of questions to the client (product managers, or CTO types usually). What should you ask? Typical top 5 (might vary)
a) What is your target demographic, this is usually number one.
b) What is your current design flow, and at what point are people “bouncing “off,… if they know.
c) Do you have any new plans for a new business direction, focus or strategy that might complicate the current or new flow, if so this pattern framework needs to be broken down to fit the new interaction design of the site.
d) Are you planning a mobile/tablet strategy? Not in place yet? If so discuss if it’s worth building the App first.
e) What are the time constraints? are we building it out in sprints to test new design and flows or building it all at once?
2) Start to reverse “engineer” the competition, what? Engineer?… Yeah, find all the competitors and make a simple diagram (pen and paper or you can get fancy) show all the feature sets for each competitor product, this will allow you to see the differences between all your competitors at one time. Also take screen shots of any interesting or cool flows or UI designs from the completion’s sites. Now lets make a flow map for each site, nothing fancy just quick and dirty. Try to enter every site from as many points of entry per site, now rate the experience you had from 1-5 and document how you might do things differently and why. Don’t get too crazy with the experience, remember less is more sometimes. Ever herd of KISS (not the band), the acronym for “Keep it simple silly”. Once you have figured out what the competition is doing and why they do things the way they do, you’re ready to put foot to ass.
(The flow map should be followed to point of entry of the site, all the way to “call to action”)
3) So let’s review real quick, you talked over the site/app requirements with team members, you know all the demographic, direction and expectations at this point. You know the completion better then they know themselves(this is a vital component, any good solder will tell to know your enemy better then you friends) make sure your ammo is full before you go any further, if you’re having problems finding main competitors learn to use Google better and/or ask the team members. There are never any stupid questions, just stupid answers…or people, or both… Let’s move on with the UX boot camp.
4) I want you to review the current site/app you’re working on, enter the site every way possible note your experience 1-5 and what needs to change and why. Also make sure you use all sign up forms or follow the CTA flow (these are called pattern frameworks), see where its gets difficult, boring (lots of words) or drops off. Make a comparison chart, highlight your site, and put it up against all the other sites (competition) how are things looking? Can you see gaps in the sites current flow when comparing it? Drop offs? Things you’re doing better or worse at? Now you can see the light (Aha! moment), let’s start building our new and improved site/app flow.
5) My first steps are to get a standard HB pencil, some blank computer paper and some small post it notes and start drawing flows, Crazy hu, you thought about using tools really technical I bet. For now it’s best not to get caught up with time constraints of technology, besides your design will change minute to minute this is major brainstorming we’re doing here people (PS, if you can’t draw don’t worry you’re not presenting this to clients or users, it’s purely for internal usage, it’s just faster and allows you to loosen up and get dirty). Don’t be afraid to think outside the box and challenge yourself or other rules; this is what makes us UX designers “interesting” people. Use the post-it notes to perfect your annotations for the interactions page by page, the post it notes are great because you can move them around without re-writing or ruining your mock-ups.
Now that the flow is in good shape and it makes sense from multiple entry points and pattern frameworks, I want you to count how many button clicks a user would take to get them to buy, sign up or do the thing your site wants users to do (CTA), 3-4 clicks is average, more is fine as long as the user feels progress and accomplishment, don’t leave them hanging before you capture them, try not to make the process long, try to eliminate as much sign up as possible, find a good integration tool if needed (FB connect or something), 3rd party sign up/in tools are awesome, it unlocks so much power for your site and its dead easy to use, but this might not be an option for you if you need SSL options; just do your research.
Let’s create real mid- high fidelity mock-ups. Notice how we just skipped wire framing, we basically already did this with the drawing and annotations, and why do it again? Just to show people you know how to make boxes and layouts? Skip this please, try to never make computer based wireframes this is old and cumbersome method and needs to be abolished. If you disagree that is fine, but time is money.
6) Choose your favorite graphics editor, mine is Fireworks and Photoshop, they have wicked powers to export/create HTML, CSS…and can make vector art (fireworks) Make sure to use proper naming when creating layers, it will make your life easier down the road. Also lets use our own common sense and try to build our prototype graphics in the right dimensions for the web or application you building, Also don’t build small graphic, but building bigger and scaling down is fine.
7) First off, don’t get caught up on heavy eye candy graphics just yet, we don’t want the user to get mixed up and judge the comps based on UI design, make note of this early to the user . I am not going to tell you how to set up your page in Photoshop or Fireworks, everyone has their own format for guide lines and so on. Turn on a few of the stick to grid, edge or pixel or what have you, also get friendly with layer comps in Photoshop and in Fireworks, please Google it to really understand it, but in a nut shell this cool feature will allow you to turn off certain layers and turn on certain layers as a group to mimic different webpages the user is on, this is fast for seeing how your flows are developing, without wasting time turning a million different eye balls off and on… When saving your work remember to save for web and devices, or another good way is PNG with transparent BG. (developers prefer this method). Now let’s build clickable comps to show our clients and maybe some test subjects for user feedback.
If you’re a HTML, CSS and Java guru go ahead and make these comps clickable in 5 times the amount of time then it will take me. The time your done building the comps I will have built the prototype, tested it out and started making my revisions.(trust me I have had races with some fast coders). As long as it works and it simulates the sites navigation the way you planed it, use whatever method you want. I like to use Keynote (power point for windows) for interactive PDF web prototypes, and Proto.io for mobile and tablet for my other types of interactive comps. The client can now play with the interactive comps on his/her computer, IPhone or tablet and really get a feel for what is coming, at this point we can see life, and see where people will get stuck or drop off, this give us the chance to revise our flow.
9) Once you have built a few iterations of the site or app, now do a fun A/B/C test on a few people that are the demographic, ask friends, family, co-workers not in design or programing, find the ones who don’t use tech much I find they make the best test subjects. My philosophy is if a 5 year old can use your site, anyone can. When testing the site, don’t set the users up, let them figure things out, take notes and only assist or give a caveat when needed. Now that we tested the shit out of the flows, let’s go back to the drawing board and look through all the notes you took while the users where testing your site, start looking at ways to improve your existing pattern framework, find all the kinks you can before it is shipped of for development.
10) Test the flows again on some innocent bystanders, I would at times ask people on the bus, they are usually willing participants; just don’t ask in the morning. You should have a very refined product at this point, it should look good and feel good with no dead ends, sticky spots or confusing UI design (icons) be clear with all design, do not assume anything. I love icons but designers definitely don’t use them wisely. Also try not to be to “out there” with your design and flows, sometimes making things too clever or obvious can backfire, you need to find that middle zone of design and navigation. A quick tip with nav bars, don’t use to many colors, don’t make the text to big, don’t have more then 5-6 options and try not to have any lame pull down tabs…get creative…what is this 2005?…
Save all your designs and graphics in the right format and get them ready in a folder with some named subfolders, be organized with your work. Place all the web page graphics in different folders, remember you don’t need to repeat or save multiple graphics, your developer will be re-using them, but make sure you have design maps for each page with annotations, and text or copy, with Font size, font type, and colour. If you’re a CSS or HTLM guy, you can get the majority of the front end stuff completed and had over your files to the developers.
And remember how lucky we are to actually get paid for doing this stuff….ride the bubble…
