Monthly Archives: August 2016
Interfaces are all about communication and getting things done. A website’s UI is a means to an end, and the designer’s job is to create an interface that helps the user reach that end quickly.
Icons are perfect for interfaces because they convey meaning without words. Users can learn how an interface works just by studying the visuals and interacting with the elements.
In this post I’ll cover a few different ways to use icons to improve the quality of UX on a website. There are no perfect uses but there are commonalities between great icons and an improved user experience.
Icons naturally help users navigate through a website based on visuals alone. The best icons are the ones that most people recognize so you always want to stick with these first.
Tim includes icons above each link label to distinguish between purpose and behavior. It’s one of the clearest methods for icon use because it’s easy to see and easy to understand.
Always remember to include text labels for links too. Pure icons for navigation rarely works, or at least it’s not the best case for usability.
Another really important icon is the three-bar menu icon. This is also called the hamburger menu and while many designers hate it, more people are slowly realizing what this symbol means.
The menu on Inc is another great example showing how icons tie into navigation.
As a business owner, have you ever been totally clueless as to why your website isn’t converting? Do you feel like you have everything in place, yet your audience isn’t following through on your call to actions buttons, and your bounce rate is sky high? There could be a few crucial web design features that are missing on your website, and adding and adjusting them might mean the difference between success and failure.
Use this article as a ‘checklist’ to see whether your web design is on par, and which features you can implement to boost conversions and encourage engagement.
At the end of the day your audience will be attracted to modern design, elements they sub-consciously accept as the norm, because they’ve had that user-experience on other websites. Think of modern design as a combination of art, design, and functionality. When these elements ‘work’ in harmony your page will be undeniable and ultimately guide the visitor to where you want them to be.
So, ‘What’s Missing’?
1. Web Design That’s not Unique to Your Industry & Brand
Your web design is the first impression a visitor will have about the business. This page should not only be reflective of your industry, products or services, but it should stand out from competition and reflect your company culture. The Following should be considered:
- Design should attract and imprint in the memory of your visitors to create “awareness”
- Content should create a narrative to ‘tell your story’ through the website.
Make sure that your web design is unique and recognizable. Distinct visual approach & style, typography and interactive design elements play a big role in this department. All this creates the first impression in your visitor’s head and is crucial for the next interaction with your website.
Your content should engage. It shouldn’t be boring. A great way to incorporate additional interaction, to make your visitors stay connected is through the use of bold hero sections with enriched sliders, video content and content animations.
- Hover Animations will make the website more intuitive and will give additional information regarding a feature function. Hovering over a feature or image will allow for instant visual feedback.
- Large Scale Animations include effects like parallax scrolling and pop-up notifications.
- Loading animations are used to keep a user engaged and are popular for one-page sites, flat design and minimalism.
- Background animations and videos should be used in moderation but can add to the storytelling element of the page. It should be seen as an add-on and not a distraction.
A great example of this aspects is the creative WordPress theme TheGem recently released on Themeforest marketplace. This theme understands the need for individuality, creativity, awareness and interaction, offering many industry specific unique design concepts . When going through the demo pages of this theme you will see how different industry stories can be told in an attractive visual way, involving the user in interaction and remaining in his/her memory.
2. No Trending UX and UI Features
Even though your page visitor might not be able to pinpoint the exact reason why don’t find your website appealing, their subconscious will pick up that your page is sub-standard. Trending features within design can take a variety of forms, but for the last few years, these features are taking the front seat for UX and UI.
- Scroll Jacking is where the user’s scrolling is directed to an exact vertical point on the screen, such as the top of the next content container. It’s replaced native scrolling and is more targeted. Here are some examples for that:
- Design for Your Satisfaction
- Brilliance of Perfection
Hiring a web design can be an exciting process. When I talk about hiring a web design in this post, the advice can be applied in a variety of ways. First, it could mean hiring a single, usually freelance, designer for a job you need to be done. It could also refer to a web design agency.
Additionally, it could be advice for hiring a web designer for your own team. The advice is valuable for web designers who are looking to improve their portfolio. Now, let’s discuss five different but important things when trying to hire a web designer.
The work shows off responsive design
It’s still surprising how many times responsive designs don’t make it into a web designer portfolio. It’s hard to say if a designer is capable of delivering responsive design if it’s not there. It could be omitted by mistake or because they have never done it. You can’t tell if it’s not there. Now, this guide refers to a web designer.
The web is a flexible medium that works on the tiniest devices and their tiny screens to larger devices and their larger screens. It’s important for any website to have a good responsive design. At this point in time, there is no excuse in not at least including a screenshot of the responsive design as part of a project’s case study.
Modal windows are those popup windows that appear over the screen rather than opening a new tab/window. They usually darken the background to bring attention to the popup.
Everything in the window takes precedence over the page so these modals are meant to draw attention. They can be annoying and outright infuriating but numbers don’t lie: they work.
Let’s delve a bit into current trends of modal windows to see how they work and why you’d use them.
Dark Backgrounds & Clickable Areas
Modal windows follow a similar design strategy and they’re not very complicated.
They mostly all use a darkened background on the page to bring attention to the modal content. This shouldn’t be a pitch black background because that can feel intimidating.
Instead the user should see a touch of the page behind the background, but it should have a reduced opacity. This could be 90% or 50% depending on how much you want to hide the page.
This isn’t universal but I hate when designers remove or ignore this feature. Yes there’s usually an X button or close button, however it takes more effort to move the mouse onto that button.
It should be possible to just click the background and hide the message right away.