Designing for the web

Designing for the web

10 essential UI (user-interface) design tips

Memorize these 10 guidelines if you want to build elegant, easy to use, and human-centered user interface designs.

A website is much more than a group of pages connected by links. It’s an interface, a space where different things — in this case, a person and a company’s or individual’s web presence — meet, communicate, and affect each other. That interaction creates an experience for the visitor, and as a web designer, it’s your job to ensure that experience is as good as it can possibly be.

And the key to that is to think about your user first, foremost, and always. Thankfully, while web design is a relatively new discipline, it owes a lot to the scientific study of human-computer interaction (HCI). And these 9 handy guidelines straight from HCI research will help you focus on your users when designing websites and apps. Interface design, which focuses on the layout of functionality of interfaces, is a subset of user experience design, which focuses on the bigger picture: that is, the whole experience, not just the interface.

1. Know your users Above all else, you have to know who your users are — inside and out. That means knowing all the demographic data your analytics app(s) can pull, yes. But more importantly, it means knowing what they need, and what stands in the way of them achieving their goals. Getting to that level of empathy requires more than careful analysis of stats. It requires getting to know the people who use your website. It means speaking with them face to face, watching them use your product (and maybe others), and asking them questions that go deeper than, “What do you think of this design?” What are their goals? What stands in the way of them achieving those goals? How can a website help them overcome or work around those challenges? Don’t stop at knowing what your users want. Dig deeper and find out what they need. After all, desires are just outgrowths of needs. If you can address a user’s deep-seated need, you’ll address their wants while also fulfilling more fundamental requirements. The insights you’ll uncover from analyzing data and speaking with users will inform every decision you make, from how people use your interface to what types of content you’ll highlight within that interface.

2. Define how people use your interface Before you design your interface, you need to define how people will use it. With the increasing prevalence of touch-based devices, it’s a more pivotal concern than you might think. Just look at Tinder: the app’s user experience is literally defined by the ease and impulsivity of a simple swipe. People use websites and apps in two ways: directly (by interacting with the interface elements of the product) and indirectly (by interacting with ui elements external to the product). Examples of direct interactions

• Tapping a button

• Swiping a card

• Dragging and dropping an item with a fingertip Examples of indirect interactions

• Pointing and clicking with a mouse

• Using key commands/shortcuts

• Typing into a form field

• Drawing on a Wacom tablet Who your users are and what devices they use should deeply inform your decisions here.

If you’re designing for seniors or others with limited manual dexterity, you wouldn’t want to lean on swiping. If you’re designing for writers or coders, who primarily interact with apps via the keyboard, you’ll want to support all the common keyboard shortcuts to minimize time working with the mouse. 3. Set expectations Many interactions with a site or app have consequences: clicking a button can mean spending money, erasing a website, or making a disparaging comment about grandma’s birthday cake. And any time there are consequences, there’s also anxiety. So be sure to let users know what will happen after they click that button before they do it. You can do this through design and/or cop

Translate