User interface (UI) designers and website developers know how crucial good design is. No user is going to engage with a website or app that isn’t accessible and aesthetically-pleasing. Don’t get hung up on just the aesthetics, though. There’s a lot to consider when designing or redesigning a website. If you want your website to accomplish your goals, think beyond how your website looks.
Optimize for how easy your site is to use (usability) and how enjoyable your website is for users to interact with (user experience). Websites with a great User Experience will give a great first and lasting impression. No one is going to win an argument if they take the position that focusing on user experience isn’t important. As DesignMantic says, “User centric design is king when it comes to user experience…”
What’s not to love about clean, friendly designs? Unique user interfaces that are fun and high-performing are our jam so when I stumbled on this colorful graphic detailing “The 10 Commandments of User Interface Design” I had to share. The infographic identifies ten do’s and don’ts of UI. My favorites are below:
STREAMLINE NAVIGATION
An easy-to-navigate website is so so important. One thing I, as a user and a marketer, hate is when I land on a site and it’s unclear where to find what I’m looking for. I just want to find out your hours, or at least a phone number to call your establishment and find out your hours! (There are one-too-many restaurants like this in my area and I feel like I should drop a business card and say, “Your food is great, your website sucks. Call me and let’s fix that.”)
A few ways you can ensure intuitive navigation is with icons and clear calls-to-action. And of course with mobile-friendly design. Beyond that, keep the structure of your nav simple and at the top of the page. Also include navigation in the site’s footer.
DOWNLOAD OUR CHECKLIST OF 30+ WAYS TO PROMOTE CONTENT HERE.
MAKE IT RESPONSIVE
Everyone should be engaging in responsive web design. Period. If you want to provide a great user experience, your website has to be well-suited for different devices, operating systems, and browsers. (Run cross-browser test before launch.)
Someone actually asked me the other day what “responsive” means and I responded with, “Trust me, you’ll no when a site isn’t responsive.” But basically it’s providing an optimal viewing experience for users. A website’s structure should be flexible. This means easy reading, easy navigation, minimal resizing – across a wide range of devices. The layout of a site works well no matter what device it is being viewed on.
A number of technique are used when implementing a responsive design, including using columns, parallax scrolling, fluid layouts and grids, and drop-down menus.
DEFINE FONT FAMILIES
Your website should have a good mix of font families. Don’t go crazy and use ten different fonts throughout your site. Pick two or three typefaces that compliment each other.
Legibility is another big ticket item. You may think you’ve found a super cool and unique script but if it’s even remotely difficult to read, don’t use it.
BOOST OPTIMIZED IMAGES
Make sure your images are optimized when designing your website. Not only with huge files slow down your site but it’s just bad form. Preferably, images with be vectors (.ai, .eps, .pdf, or .svg files). Vector images allow for more flexibility and are excellent in creating graphics that require resizing, like your responsive website does.
Further optimize the images you use by adding alt-tags (text alternative of the image on the screen).
ELIMINATE ERRORS
How do you eliminate user errors? By understanding your users. Compiling user demographics and other user research will help you realize how others use your site or app and inform your design process.
You still want to allow user error, though. Make sure to incorporate a ‘HTTP 404 not found’ error message. It’s a client-side error that typically means either the page has been moved or removed and the URL wasn’t changed or that the user typed in the URL incorrectly. Web servers can usually be configured to display a customized 404 error page, by the way. That way you can have a more natural description that matches your branding.
Other things to consider when designing a webpage: readability and a place for feedback or suggestions.
~ ~ ~
Here are all of DesignMantic’s rules for getting your website’s user interface up to standards. Focusing on these steps will help you create a seamless user experience.
Courtesy of: Designmantic.com
Comment
Leave a Reply
Locations
Orange County
4590 MacArthur Blvd., Ste. 500
Newport Beach, CA 92660
Santa Barbara
7 W. Figueroa St., Ste. 300
Santa Barbara, CA 93101
Yes, these are the necessary UI Designs which we have to use. I really like your post because you gave every tiny detail. Thank you.