There are just so many web designers out there riding the responsive wave, going quietly (but happily) crazy in all the directions they can go or be pulled in. Content-first, mobile-first, potato-first…it’s awesome.
Wait, I forgot another first. User-first, aka UX.
That’s a thing, and despite being around since, oh, forever, we are only now taking the time to realize how important it is. Unfortunately, a lot of us still don’t know the classification criterion and get the people who make web experiences better mixed up with interface/visual/web designers. To put it as simply as possible: interface designers should be doing everything the experience-designer says.
Why? Because the experience-guy is trying to make everything smooth sailing for your users, and we can all certainly get behind that. Sure, we say. Bien sur.
And then The Man interferes and everything goes to merde. Budgets, timeframes, indefinite results… who needs all that?
Interface is an integral part of experience. User experience is not based on one thing or the other; it doesn’t start with this and end with that. You can’t just twiddle the ‘look-and-feel’ of your site and call it UX, although it’s a start, if you’re doing it based on feedback and not just because you’re bored.
Since UX and UI are so closely related, the average Joe working as Interface designer often finds himself doing double duty with experience analysis. Testing becomes as much about ease-of-use as it was about browser compatibility.
These brave UI/X designers face the wrath of everyone (think: owners, product designers, management, users) to whip the website into a superb portal that makes everyone happy. Well, most of them happy.
During that course of time, they run into snags like:
Prototyping
Image source: Aloïs Castanino
Wireframes have always been the go-to tool to show off prototypes and under-construction projects to clients and team members. And that’s justified. UX designers would agree, but wireframes don’t really do much to show user-journeys and states.
For instance, let’s say you created a great dashboard for users who registered/ paid for ‘premium or pro’ mode/ did the Harlem shake perfectly. I haven’t been able to find a wireframing tool that will accommodate all the changes in state and communicate it effectively. So how do you show the people whose money is on the project how far you have come or intend to go?
Chris Day gives some great advice on that front: animations for the harder UI parts (in this case, a hypothetical card-creation tool that lets you work with others), telling a story to make up for UI elements that aren’t complete (because sometimes the simplest route is the best), and annotations (for little details that matter).
He also suggests breaking up the project into small, easier-to-manage nuggets which serve dual purpose of making collaboration less of a pain and figuring out the harder UI elements that need work.
He also suggests higher-fidelity wireframes. That definitely has its advantages, but it’s subjective and depends upon level of co-operation between team members and project flexibility. You can do just as well with a pen-and-paper as with a high-end HTML prototype.
Forms
Image source: Gabriel Sirbu
Most CTAs are preceded by forms, making them a pretty damn important part of the UI. It’s up to UX designer to make the form-filling as quick and simple as possible. Well, that’s easier said than done.
Users typically find form-filling annoying (when we return the form with all the fields erased because there was an error in one of them), tedious (it’s so long), and just generally boring.
There’s no way around the ‘boring’ part, but we can make them less of a pain.
Image source: Katherine
Use conversational tones and make your form language user-centric. Instead of what you need (say, ‘departure date’), ask them what they are giving (“When do you want to go?”). Basically, this is one of the essential landing page basics.
Users know what they are being asked to provide. If it’s jargon, remove it. Keep it simple.
Other best practices include keeping the form short and asking only the necessary details, inline form validation, input hints, clear labels (obviously), and progress tracking.
Identifying Test Elements
A/B split testing is pretty straightforward: you take an element to focus on, take a ‘control’ (keeping the original element) and a variation (changing that element). You analyze which one is doing better, and the winner gets to stay. It’s a huge part of a UI/X designer’s job: testing for efficacy and usability, and making changes as required.
Now how do we find out which elements to focus on?
While the process itself is straightforward, finding the elements is often random. That’s well and good for research, but testing wrong elements in live environment (which most of us will have to do) can be catastrophic.
While sites like Amazon and Google can pull-off constant testing, but smaller enterprises don’t have the budget (or inclination) for that sort of thing. Users themselves can get fed up of constant interface changes and leave to never return.
You need to narrow the scope. Research and Analytics give you a clear idea of what needs to be changed.
Luke Hay speaks from experience. We all know and love Google Analytics. That precious data can be used to “identify problem areas on a website, show how users are engaging with a site, and measure the results of any design improvements.”
Image source: Luke Hay
You can also combine your knowledge and some user research for pin-point precision in identifying which elements need testing. Jennifer Cardello says it best: “Haphazard A/B testing is the equivalent of throwing ideas at the wall to see which ones stick.”
Following the steps to identify variation elements in A/B Split Tests can save lots of time and trouble later.
Stakeholder Stress
UX designers do what others can’t: they can put themselves in users’ shoes and look at a website from their perspective, finding little peculiarities in a seemingly perfect product and interface. That sort of mindset is driven by empathy… a little bit of which should be directed towards the stakeholders.
Most clients are more ‘enlightened’ today in matters pertaining to web than ever before. And yet we, as designers (UX, UI, graphic, anything) still see them as more suppressive rather than sensible humans who hired us for a reason (and will ultimately benefit/get harmed from our work).
Sometimes, all it takes is a little communication and that one wonder ingredient (empathy) to reach a profitable compromise amidst clashes.
Here is Tom Greever trying to emphasize the need to develop solidarity with stakeholders. A few bits may sound like “sucking up” to our ironclad egos, but he hits it very precisely in bulls’ eye with this: “If designers expect to communicate effectively with stakeholders, they need to use the same skills they use in identifying with users.”
Optimizing for Mobile
Image source: Aaron Moody
Everything I have listed above is specifically generalized (yes, that was intended) to keep it inclusive for the veritable army of mobile users. But I will still take the time to address this.
Yes, it’s quite obvious that UX needs to be different for desktop and mobile users. It’s not about shrinking and hiding content, and we all know it.
We also need to factor in some pretty significant factors, none of which are about ‘screen size’.
A mobile friendly UI will accommodate touch gestures and the plumpest fingers tapping away to interact with the page. That automatically leads to lots of whitespace and clean designs, large form fields, and nicely sized buttons.
Lyndon Cerrejo also points out what we may forget in terms of mobile usability: affordance and swipe ambiguity. “Make it clear to the user what can be selected, tapped or swiped.”
Putting things in context is what UX designers do, and mobile is no different. Factor in distractions, motions, and connections on an average mobile and you see the trouble. You can trek around those by sticking to essentials (see: content-first), simplifying tasks, and making interactions intuitive.
Bonus: The Dark Side of UX
In an attempt to meet goals, designers will often stray off the ‘righteous path’ and use deceit and trickery to trap/confuse users. This involves disguising ads as content, bait-and-switch, and everything else in between.
Sites like Dark Patterns is an ongoing effort to educate users (and everyone else) about bad practices and how to avoid them.
Keep an eye on them and make sure you are following a path that, may not get conversions, but doesn’t lead to an early death either.
Wrapping Up
Image source: Devang Patel
A good UX is intangible, immeasurable, and indeterminable. But for all that, it’s the one thing that matters the most at the end of the day. Web designer or not, this is what everyone, everyone should be aiming for.
“User Experience is branding in the interactive world.”
Make sure yours is well received and well loved.
Source: http://ift.tt/1N1kjbz
No comments:
Post a Comment