The Most Common Website Problems That Affect Business

The Most Common Website Problems That Affect Businesses

Your company’s website is it’s most important online sales asset, period. If you expect to create any sort of value for your company through your website, you need to make sure it’s armed for the task.

Bounce Rate is the indicator that shows you how many people are leaving your website after seeing a single page. When your bounce rate is high, it means visitors aren’t liking what they are seeing or aren’t finding what they’re looking for in your website, even though your company might actually provide what they need. If your visitors are bouncing, your website may have problems related to one or more of these categories:

In this blog, we want to take an in-depth look into the most common website issues affecting businesses all around the globe:

Design

Clean, responsive, and visually-appealing design is indispensable for a corporate website. Your visitors need to like what they see first and foremost before you can start expecting them to provide you with their information. Design problems can range from unappealing or outdated visual design to issues with the website’s internal structure. Poor design can result in slow loading time, confusing navigation, and altogether failing to capture leads or even keep visitors interested in staying. Some of the most common website design problems out there are:

Content

A visually-appealing website will keep your visitors interested for only a short period of time if your content isn’t up to standards. We like to say that “Content is King” because content is the answer to your public’s questions. Content is your online sales pitch; you don’t have a face-to-face interaction with your visitors, so whatever they read on your website has to convince them to take the next step. Content also needs to fulfill certain standards so that search engines can find it. As important as content is, it’s probably the area where many business websites are weakest.  Some common content issues are:

Optimization

So, your website’s look and feel are modern and intuitive, and you regularly add relevant content, but you’re still not getting enough organic visits. You may have missed out on a critical step: SEO.

SEO used to be seen as an afterthought, but nowadays optimization is considered a minimum requirement for search engines to give your website any sort of attention. SEO needs to be taken into consideration from the very first steps of content design. Keywords need to be researched, strategized, and implemented with a tactical approach. Overall, SEO is not an overly complicated process, but you need to know what you're doing to get it right. Common SEO issues are:

Lead Capturing

Lead capturing is the science of funneling a lead through your website content a towards them giving you their information to start the sales process. There both front-end and back-end characteristics of lead capturing optimization. A well-designed information flow, strong Calls to Action (CTAs), and comprehensive contact forms are all part of the front-end aspect of lead-capturing. Behind the curtains, the lead funnel needs to be able to notify your sales team and get them to act quickly. Some of the most common website problems relating to the lead capturing process are:

If you are experiencing any of the most common website issues that affect business, you may need some expert advice. Contact our team to find out how your website can improve and become a powerful sales asset for your company.

5 Reasons To Get A Website in 2017

Why Your Company Should Get a Website Right Now

In our field of digital marketing we see a ton of websites. The good, the bad and the ugly. While there isn’t a whole lot worse than a really bad website, there is one thing – having no website at all. We’ve seen impressive websites for companies as big as they get, and great websites for as small as they come, such as landscaping and photography. Big or small – here are 5 solid reasons why you should get a website in 2016:

Connection

One of the most important aspects your company can provide to its consumers is being available at all times – websites do that since the Internet is 24 hours a day. Not all people are active, or interested in your business from 9am-5pm. Your competitors are online. Your audience is online. You need to be there too. Simple ways to connect, such as a contact form for people to fill out can be the difference between you and your competitors.

Impression

Your appearance can say a million words. Personally, I value a company that has a visually appealing website. When I see they have put effort into making their website look great, my attention is captured. Actually, more often than not, I remember them and value them over their competitors.

Knowledge

A website can be an excellent tool for your company to prove you have knowledge of your product or service. According to BlogHer, 81% of U.S. online consumers trust information and advice from blogs. Also, InsideView states Business to Business (B2B) marketers who use blogs generate 67% more leads than those that do not. These statistics clearly show that having a blog can be beneficial to you and your company, and a great place to share your expertise.

Selling

Having a website can be the key to more sales, especially if you have a great product or service. Even if you don’t want or have the need for eCommerce on your site, simple things such as an email list or newsletter sign up can lead to a potential sale.

Credibility

Having a website can validate what you do and help to prove who you are to potential clients and partners. If you haven’t had the opportunity to meet with a potential client, partner or customer this can be your chance to create a visual representation of who your company is and helps boost your brand within a matter of seconds.

For all these reasons and more, it’s time to look into creating a website for your company. Your audience is out there, use this simple tool to connect with them, impress them, show them your expertise, help increase sales, and build your credibility!


 

Ready to get started? Let us improve your online presence! Contact us for a free quote!

Affordances: Improving The UX Design

Affordances in design are important to usability and function. They’re one of the components of design that have to come together to provide an impeccable user experience. To understand exactly what makes them so important, we have to define them.

In the web design world, affordances are elements that users encounter while interacting with the design of a site. They can be:

Great web designers should really take the time to understand the concept behind these affordances. It’ll ensure that they build their clients stellar websites that take care of job one: the user experience. The big design rule is always to design for the user experience first and foremost; everything else follows that.

There’s no better way to understand this principle than to intimately familiarize yourself with what affordances are and how to successfully incorporate them in your design.

PHYSICAL AFFORDANCE

Physical affordance is based on an object’s physical appearance. Visually, this type of affordance makes instantly clear to a user what action is expected of him in a design’s interface. These are the most straightforward of affordances, and you’ve likely encountered them many times without even knowing what they were called.

The whole point with physical affordances is that anyone ought to be able to guess what action they can perform just by looking at the affordances, especially those people who don’t have much experience browsing websites. That’s why physical affordances have to be pretty blatant.

peapod

Peapod, the home grocery delivery service, uses physical affordances on its homepage. Two huge call to action buttons feature rounded corners and slight shading so they look clickable.

LANGUAGE AFFORDANCE

A language affordance is another very straightforward kind of affordance. Essentially, it directly communicates to the user that a button or a field affords a specific kind of action. This leaves absolutely no room to the imagination as to what the intended action is, also making this affordance perfect for people with very little, or even no, site browsing experience.

Language affordance is ideal in interface design when mere, visual communication is insufficient to effectively symbolize what action should be performed. For instance, people who haven’t seen many websites are likely not familiar with the magnifying glass symbol indicating “search” at the end of a search field.

Smart designers will understand this and therefore supply an explicit, language affordance to leave no doubt what the action should be.

nanamee

Nanamee.com uses language affordance in the search field because there’s a hard-to-miss “Search Images” spelled out. This affordance makes it explicitly clear how to interact with this feature, and is far clearer than simply “Search” or even just an icon.

PATTERN AFFORDANCE

Pattern affordance is perhaps more common in web design than even the aforementioned, explicit affordances. That’s because, as the name implies, designers of all stripes utilize these affordances in their designs without so much as a second thought. Users are able to recognize and understand these types of affordances due to their commonality. Here are some examples of widely used pattern affordances:

Pattern affordance can be seen on most any website, such as the one by Market America, a product brokerage and Internet marketing company. Right off the bat, we see exactly where these pattern affordances are in effect.

marketamerica

Market America features a very noticeable navigation bar across the top of the homepage. The magnifying glass icon is at the end of the search bar, which also features the language affordance of “Search Market America.” Then, there’s the downward arrow next to the American flag, which offers users the chance to pick a different site language.

SYMBOLIC OR ICONIC AFFORDANCE

The affordance in an interface can be communicated simply through a symbol or icon. Sometimes called metaphorical affordances, these affordances rely on real-life, physical objects as icons to quickly tell users what action is expected of them. They work well in many, different instances, some of which you’re undoubtedly familiar with already:

The great thing about symbolic or iconic affordances is that they can be context-based, too. For instance, a magnifying glass in a document-viewing program likely indicates that you can zoom in or out on the document. Of course, if the magnifying glass is next to a search bar, then it’s clearly going to afford searching for a specific word or term.

That’s what makes using symbolic or iconic affordance so convenient. You can say so much, and so much quicker, as a designer than if you had to use text.

aviary

One app that could use some work on its affordances is Photo Editor by Aviary. Unless you’re super-familiar with this app or with photo editors in general, you’re not going to understand how to touch up blemishes when you only have a choice between three circles of different size.

AFFORDANCES ARE THE KEY TO GREAT UX

Understanding what an affordance is — as well as the specific uniqueness between one type and another — can really distinguish you from other web designers. Think of affordances as the gateway to communication for your users.

Without them, even the nicest-looking design would be totally useless because users wouldn’t be able to make sense of it one bit! Since the user experience is the highest priority for designers, making sure you have a solid understanding of affordances is essential.

When your design’s done, it should be affordances that easily and effective empower users to use your design with the least friction possible.

Principles Of Responsive Web Design

Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let's clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it.

Responsive vs Adaptive web design

It might seem the same but it isn't. Both approaches complement each other, so there is no right or wrong way to do it. Let the content decide.

The flow

As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it's called the flow. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.
What is responsive and adaptive web design

Relative units

The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That's where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).
Relative units in CSS

Breakpoints

Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. But use them with caution – it can get messy quickly when it's difficult to understand what is influencing what.
Breakpoints in the responsive web design

Max and Min values

Sometimes it's great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense. This is why Min/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don't go over 1000px.
Min and max widths in CSS

Nested objects

Remember the relative position? Having a lot of elements depending on each other would be difficult to control, therefore wrapping elements in a container keeps it way more understandable, clean and tidy. This is where static units like pixels can help. They are useful for content that you don't want to scale, like logos and buttons.
Nested objects

Mobile or Desktop first

Technically there isn't much of a difference if a project is started from a smaller screen to a bigger (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first. Often people start from both ends at once, so really, go and see what works better for you.
Mobile or desktop first

Webfonts vs System fonts

Wanna have a cool looking Futura or Didot on your website? Use webfonts! Although they will look stunning, remember that each will be downloaded and the more you'll have, the longer it will take to load the page. System fonts on the other hand are lightning fast, except when the user doesn't have it locally, it will fall back to a default font.
Webfonts vs System fonts

Bitmap images vs Vectors

Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or a gif, for vectors the best choice would be a SVG or an icon font. Each has some benefits and some drawbacks. However keep in mind the size -- no pictures should go online without optimization. Vectors on the other hand often are tiny, but some older browsers won't support it. Also, if it has lots of curves, it might be heavier than a bitmap, so choose wisely.
Bitmap images vs vectors

Hopefully, these principles would help you at the time of design your web site. Remember that a responsive design is everything you need to approach your publics.

UX Design: Why White Space Is Essencial?

Thinking on UX design, white space isn’t just an aesthetic choice— it serves three essential functions.

Screen Shot 2015-06-24 at 10.51.56 AM

1

Improving Comprehension
If cluttering your interface overloads your user with too much information, then reducing the clutter will improve comprehension. In fact, properly using white space between paragraphs and in the left and right margins has been proven to increase comprehension up to 20%. The skill of using white space lies in providing your users with a digestible amount of content, then stripping away extraneous details.

White space can be broken down into four elements: visual white space (space surrounding graphics, icons, and images); layout white space (margins, paddings, and gutters); text white space (spacing between lines and spacing between letters); and content white space (space separating columns of text).

 

Medium

 

Medium is a great example of striking a nice balance with all four elements of white space. First, think about the goal of the user from an interaction standpoint: users want to access interesting content as quickly as possible. The homepage immediately facilitates that goal by placing content front and center, with plenty of white space on either side to add emphasis. There is ample space around visuals and between lines of copy, although the padding around images could be more uniform (notice how the space to the left of each image is not consistent with space below).

Beyond improving comprehension, white space also helps create mental maps. Minimal white space is used between the top navigation and content stream, since both serve similar functions in driving the user deeper into content (and similar functions should be grouped together). Because the right-side navigation focuses more on creating and saving content, more white space separates it from the content stream. In this case, white space helps users assign different functionalities to different parts of the interface. Once users click through to an article, white space helps them focus on what they care about most: the content. Notice how the extra spacing between each line of text improves readability.

2

Clarifying Relationships

When observing how individuals organize visual information, Gestalt psychologists stumbled on what they call the Law of Proximity, which states that images near to each other appear similar.

Place labels closest to the relevant fields. As you can see in the below example, information is communicated far more clearly when labels are placed closer to the fields they relate to. Research has shown that even the slightest hesitation can hurt form completion. In this case, merely adjusting the spacing increases the user’s confidence in filling out the form, which of course improves completion rate.

Group related topics together. When dealing with long forms, the task of filling them out can seem so overwhelming, some users will quit before even trying. Breaking the information up into appropriate groups can help make it feel more manageable. In the form on the right, just categorizing the 15 fields into three groups makes the process feel easier. The amount of content is the same, but the impression on users is much different. Form fields usually present the most friction to users, but the same principles can also apply to navigation and site content. Instead of a top navigation menu with 20 items, you can create a dropdown menu with four to seven top-level items and the rest categorized under submenus.

3

Attracting Attention.

Ultimately, you need to understand that the power of white space comes from the limits of human attention and memory. Just compare the Yahooand Google interfaces. Yahoo tries to get the user to consider too many actions at once. Google understands the bottom line that people just want to use search engines to find stuff. By being realistic about the user goal, Google’s design encourages more effective interaction.

Reducing cognitive load will make the UI not only more usable but also more enjoyable to use, and it’s white space that will help creating this sense of harmony and fluidity throughout the user’s experience.

 

Minimalist Web design: The seven basics

The simplicity of minimalism may seem simple enough, but under the surface lies far more than just, “the bare minimum.”

When it comes to minimalism, don’t think it’s easier just because it’s simpler. Because there are fewer elements, you must provide the same level of usability (perhaps even better) with less interface. To balance aesthetics with functionality, minimalist Web design is defined by fearless use of space, stunning visuals, striking typography, and an overall focus on the content itself – and nothing else.

We call these techniques the bases of minimalism, and below we’ve listed the seven most helpful based on our experiences building and appreciating websites. It’s no surprise that minimalism is becoming a popular style today – it correlates directly with many of the modern web design trends, which you’ll also recognize below.

 

1. Negative Space

 

The primary design element that most people associate with minimalism is space, in particular, negative space. And lots of it.

Minimal design isn’t just a small visual surrounded by a colorless expanse. The style also encompasses space of any color, although textures are not included in this context. White, black or very dark backgrounds are the most popular, but some designers also express negative space through full color backgrounds.

As shown below, Lindvall A&D uses a bright aqua background with simple navigation (along with the other minimalist elements we’ll describe later) on the homepage to lure users into the architecture firm’s website.

Screen Shot 2015-06-09 at 11.32.58

Photo credits: http://www.jonaslindvall.com/

Negative space serves to manipulate the user’s visual flow. As a rule, the more negative space around an element, the more the eye is drawn to it – you can see how this is a powerful tool in a minimalist layout when you’re down to only a few, but powerful elements.

Additionally, negative space allows for more comprehensive organization of elements, preventing the design from overwhelming the user. Negative space is especially useful for interior pages, as you can see below on a more detailed landing page from Lindvall.

Screen Shot 2015-06-09 at 11.33.32

Photo credits: http://www.jonaslindvall.com/

Generous negative space also creates a sense of luxury. The treatment makes a lot of sense for this architectural design firm, considering how they want to appear sophisticated and draw attention to the most important part of the page: the images of their work.

On that note, remember that the goal of negative space is to draw more attention to the content itself. Content-first design is the core of the minimalist philosophy – the bare aesthetics we commonly associate with minimalist design are just a means to achieving that end.

Using negative space is a skill on its own.

2. Large & Vivid Photography

For designers who think that pure minimalist sites feel too emotionally distant, oversized photographs add a comforting touch of familiarity without dominating the foreground.

Screen Shot 2015-06-09 at 11.34.10

Photo credit: https://makgoods.com/

The most prominent form of artwork in minimalist design, hero headers and hero images are defined by a dramatic image or slider placed near the top of the scroll.

This enables an entire world of emotional connection and atmospheric settings – all reliant on the content of the photograph – while retaining the simplistic interface of a minimal design.

However, remember one key tip when selecting the photo: all the visual minimalist characteristics should be present in the photograph, otherwise you lose the advantage. For example, choose a high-definition photograph composed with ample negative space – expansive skies, or empty white walls as above. Choosing a busy photograph full of distracting items only negates the benefits of the surrounding minimalist interface.

3. Dramatic Typography

With most other elements on the chopping block, the one that every site cannot do without is words. As emphasis is added to the elements that remain, by extension emphasis is added to typography. Beautiful, sharp and even custom typography is a perfect focal point in a minimal framework.

Screen Shot 2015-06-09 at 11.34.40

 

 

Typography brings immediate focus to the words and content while crafting a much larger intriguing visual. The most impressive examples of minimal design and typography often include bold styles (with thick strokes) and interesting letterforms (such as a dominant typeface for headlines paired with a neutral typeface for other content).

4. Beautiful Contrast

The white background is such a popular choice among minimalist designers because it’s the perfect canvas for contrast. A hallmark of minimalist design, black or white backgrounds are commonly overlaid with small colorful elements or a bold image.

Designers can create contrast with color, size, shape, location and scale. Contrast brings attention to certain design elements, but also helps create a recognizable visual hierarchy.

Photographer Jorge Riera’s site uses contrast in beautiful ways that change page by page. On the homepage, a large white canvas includes simple, single-line navigation and a large image and the bottom of the screen in black with thick strokes and a bold feel.

Screen Shot 2015-06-09 at 11.35.47

Move to the “Who Am I” page for a lesson in typographic and size contrast – custom lettering versus a simple sans serif, and oversized font versus a size that many designers would consider more appropriate for microcopy rather than body copy.
Screen Shot 2015-06-09 at 11.36.15

Photo credits: http://www.jorgerieraflores.com/.

Normally, we’d recommend against this tactic due to accessibility and usability issues, but small body copy can be acceptable since it’s not the focal point. Instead, most of the page is occupied with images and examples of work (as you scroll down), which makes sense for an art director who probably prefers to show rather than tell.

5. Stupidly Simple Navigation

A simple design aesthetic paired with the simplest of navigation tools. Even designers who are veterans of minimal frameworks are ditching traditional navigation for the hamburger icon to further trim the number of UI elements.

Screen Shot 2015-06-09 at 11.36.46

Photo credit: http://thru-you-too.com/#!/

Before you implement a hamburger menu to help simplify your interface, make sure you’re doing it for the right reasons. As Adobe UX Designer Sandyha Talwalker suggests, first understand the primary, secondary and tertiary functions behind the navigation design.

Remember that hamburger menus also result in less discoverability of navigation items, and they can be less clear to people over 44 years-old.

Know your users and the context, then decide if the hamburger menu makes sense. Don’t do it just because it looks trendy, otherwise you’ll end up hiding navigation options that must be easily discovered.

6. Visual Harmony

To be most effective, a minimal design framework needs a solid backbone. The key components of visual organization include a strong grid, visual balance, and close attention to alignment.

A strong grid is the foundation for organization. The grid – built through tactically using negative space – lets the designer place and arrange elements in a way that communicate purpose.

It’s also very important to clarify that alignment is not the same as centering content.

While many minimal designs include the bulk of content in the center of the screen, it is not the only solution. Elements can be aligned anywhere along a grid – text, in particular, can be aligned to the left, right or center.

Arko, below, does a great job of mixing and matching alignment styles to create visual interest and balance while using plenty of white space.

Screen Shot 2015-06-09 at 11.37.25

Photo credit: http://www.arko.co.nz/

 

7. Flat Design Evolved

While originally defined by an abundance of bright color, flat design has toned down and now works exceptionally well with minimal frameworks.

The techniques mesh because of similar characteristics in visual planning and in the use of content itself. Because flat design de-emphasizes design tricks, the stripped-away concept pairs well with the philosophy of minimalism. The combination is quite common in modern websites – minimal visual hierarchy accentuated with touches of flat design in UI elements like icons and colors.

Screen Shot 2015-06-09 at 11.40.46

Photo credit: http://wonderfulcolorado.karshhagan.com/

 

Because flat design is a visual aesthetic whereas minimalism is a design philosophy, you can enjoy the best of both worlds when you combine techniques from each discipline. Your design remains hyper-focused on the content, but still appears visually rich thanks to the aesthetic values of flat design.

Conclusion

If you think creating a minimalist site is as simple as taking a bunch of elements away, think again.

Minimalism requires a sharp eye and hard-won expertise, and if handled improperly can backfire as a site that looks bad and does nothing. Keep these seven elements in mind when designing for minimalism – you’ll need to master each technique before orchestrating them into a stunning content-focused website.

Hero Images: Innovating The Web Design

On the following information we are going to see how  hero images can effectively be applied to the field of web design.

Hero Headers

The trend of hero images may be summarized as large attractive headers, as we explain before this week on the Hero Headers article. Most of these images are photographs which directly relate to the content. But designers have gotten crafty with vector backgrounds, illustrated artwork, and even animated video.

Koskela

Hero headers are the bread and butter of hero images. Basically, the hero image style is a fundamental concept that can be applied to any large “oversized” header design.

Single-Page Design

Large fullscreen backgrounds and hero images can be used in single page designs with ease. Most of the time these landing pages or parallax websites only have a small amount of information to provide. Therefore, fancy aesthetics can add real value to the page and offer space between the content.

gladz homepage hero image screenshot

The example found on Gladz is cool because it utilizes a number of different hero images. The very top of the page uses a fullscreen background that contains a fixed navigation bar. Then as you scroll further you’ll notice a smaller image that spans the full width of your browser, yet doesn’t take up the full screen.

It’s almost like a non-contextual heading that designates a new section on the page. This is definitely a great website design and fits beautifully with the single page style.

Fullscreen Backgrounds

Depending on the type of website, a fullscreen image header may just take the cake. A delicious strawberry cheesecake represents one heck of a brilliant idea. It would actually consider fullscreen backgrounds an offshoot from the hero image concept. It’s similar and definitely related, but not quite the same.

christian woo furniture website

Christian Woo has a website showcasing his furniture, interior design, and architectural prowess. Each individual page uses a background photo to expand upon his body of work. The pages themselves are very small and do not require a whole lot of content. Therefore instead of leaving the pages devoid of color, his design uses a photograph to liven up the page.

Featured Post Content

The number of online blogs and magazines has increased tremendously over the past few years. WordPress is currently one of the most powerful open source blogging platforms which many websites use for content management. Ever since WordPress came out with featured images there has been an influx of exceptional magazine themes.

One point to note about these themes is their use of different featured images on the homepage. Yes each article page uses its own image, but the homepage is where most visitors get introduced to the site. By incorporating a large hero image into the header it draws attention to that article and possibly other articles.

diy mag magaizne homepage website

DIYMag has a large image tagged onto the top article. Every other article has a similar image but the thumbnails are sized a lot smaller. Granted once you click on the article it’s also used as a large heading display. Definitely a perfect method to draw visitors further into the blog.

Conclusion 

By following these trends you should be able to recreate your own hero images that pop right off the page. Web design is a long journey and there’s always more to learn.

By investigating the most popular trends you can analyze why they’re popular and determine their value in your own work. So it's time to try out and use a hero image on your website!

Hero Header: Magnify Your Brand

The use of big images is one of the biggest trends in web design.  And not just large, but completely oversized images that seem to come to life on screen. When used at the top of a page, this is often referred to as a HERO HEADER.

On this post, we want to help you out to take advantage of this trend. Explore the tools that you need to get started. Also we give you some tips to use on the Hero Headers.

What’s a Hero Header?

A hero header is the use of a hero image, text and navigation elements on your homepage or at the top of any webpage. Hero headers can be used in a variety of ways – as an image or image with text, image slider, fixed image, or video or animated image. The design can be realistic or drawn.

The hero image is the first thing you see on a website and is design to bring you into the page. It should have strong focus and visual interest.

Hero headers place a strong focus on the visuals and often rely on simple typography, minimal color choices and user interface elements with basic shapes. Most of the design elements rest on top of the image, which is often strategically designed so that text fits in a specific position on the screen. Often branding, navigation and other tools are placed around the outside edges – typically top left and right corners – to keep the focus on the image itself.

Hero headers work in a wide variety of website designs and with almost any style of design. The visually pleasing trend really just requires one key thing – an amazing image.

Some Tips

Once you’ve decided to use a hero header, there are few things to keep in mind when designing. The design needs to be clean and elements need to not get in the way of the main image, images or video. Creating separation of elements can be vital in this style of design. Here are a few things to keep in mind when designing with hero images:

Examples of great hero headers can be found all over the web.

Lush
 Evolution Fresh
Marine Transportation Website Template

 

 

Conclusion

Hero headers are among some of the best and most visually appealing trends in web design that we have seen in a while. At Okomo we are always looking for inspiration on the finest trends. You can design you ow hero header using your ideas, your style.

We’d love to hear your opinions about this article. Are you using hero headers right now? Let us know!

How Time Perception Impacts Interaction Design

How can you use time to your advantage in interaction design ? Is it even controllable?

The elements of timing can be difficult to describe, but we all feel them, from the annoyance of waiting for something to load, to the exhilaration of breezing through page after page. The scale of timing is wide, ranging from noticeable increments to the tiny milliseconds that individually seem meaningless, but can add up to sway a user’s opinion one way or the other.

Our discussion in this piece applies all content that changes over time: video, sound, animations, and more. We’ll start by explaining why time matters, then discuss the elements of timing and how they can be improved, and then we’ll explore how speed and simplicity play a role.

Why Time Matters

Time can be a difficult concept to grasp because its range is so vast. Just as the size of an electron is almost unfathomable compared to the enormity of our galaxy, so too the span of a millisecond seems unrecognizable to the duration of a millenium.

But digital time is not the same as human time. A few seconds can mean the difference between a frustrating experience and a delightful one. We can attribute that to basic human psychology:

  1. Limits of memory and attentionDesigners must evaluate the cognitive load of interfaces. Otherwise, users will suffer from the loss of information in short-term memory, which causes frustration.
  2. People must feel in controlNobody wants to be at the mercy of technology. Some people still treat computers as a black box. Digital products that make you wait will give off the impression of incompetence and/or arrogance.

There is a rhythm to user actions. In the field of UX, the power of time is measured in magnitude 10. It takes users 0.05 seconds to decide if a website is worth their time. If they decide to stay, they usually leave within 2-4 minutes.

Whether the goal is getting an update on your Facebook feed or comparing and buying products on Amazon, every experience breaks down into a series of interactions, and the time between interactions has a compounding effect on the user experience.

Elements of Time in Interaction Design

So how exactly does time relate to interaction design? David Malouf, Design Consultant, believes that time separates interaction design from all other UX disciplines.  Time is more than just a linear progression because all interactions happen over time. We can actually examine time from 3 separate perspectives: pace, responsiveness, and context.

1. Pace

In terms of design, pacing relates to how much is accomplished in a given amount of time. Immediately, you may be thinking, “well, the more the user can accomplish, the better,” but that’s not necessarily true.

Hicks Law

Source: Hick’s Law

Experiential flow is much more important than the sheer number of available actions. Too many interface objects actually impede decision-making (and therefore goal accomplishment).

Consider, for example, the difference between one gigantic signup form and a multi-page series of smaller forms with the same information. The one long form will take less time, but the series of smaller forms will seem more manageable and less complicated to the user.

In the below example from LinkedIn, combining a wizard form with a progress bar is a great tactic for improving the pace of the experience. The long process of creating a professional profile is divided into 4 manageable steps. Users can also see how far they’ve progressed, which incentivizes them to proceed further. Pacing is less about efficiency, and more about what the user is comfortable with (UX) — not overburdening them, but not slowing them down either.

LinkedIn Wizard Form

 

2. Responsiveness

A product’s reaction time relates directly to the level of user control. The 3 most important response time ranges  for digital products are:

Delays in response time must match the magnitude of the task. For instance, 5 seconds is acceptable for loading a cloud-based dashboard, but it’s unacceptable for triggering a dropdown menu. The longer the delay, the more the relationship between the user and the interface dissolves.

Responsive

Source: UXPin

3. Context

How, when, where, and even why an application is used all affect the perception of time.

For example, the average website visit lasts 2-4 minutes, while the avarage ecommerce sale lasts 28 minutes.  Likewise, someone comparing prices on their mobile device while at the mall values speed more than someone doing the same thing at home on their couch.

Context

 

If you find that users are leaving your site prematurely, you may want to revise your link copy. You can also check the visual hierarchy (colors, contrast, typography) of the page to ensure important information is emphasized.

However, these attention-grabbing methods can be counter-intuitive on a site where you want your user immersed in a single page of content, such as a blog. In that case, you’d probably want to make better use of white space to emphasize the content (similar to Medium).  The same strategy for capturing attention has two different effects depending on the type of site — it all depends on context.

Takeaway

When it comes to interaction design, even a delay of one second can mean the difference between success or failure. If the user experience is too slow, then people become frustrated. If the user experience is too fast, people might miss vital information (or not know what it means). Understand the human perception of time, the limits of speed (and carousels), and the importance of directness in clicking.

When in doubt, remember this simple usability principle: clear is smooth, and smooth is fast.

Responsive Web Design: 5 cases

There’s a reason responsive web design is the bee’s knees right now. It epitomizes everything that is UX— from easy-to-use navigation, simplistic and useful design, adaptive orientation and resolution, to lightning fast loading speeds.

Using flexible grids and layouts, smart CSS and flat-out intuition, RWD responds to users’ needs in every way possible. It’s a UX design element that is incredibly broad-reaching and encompasses a variety of different types of websites among many different industries. Check out our showcase of excellent retail, music, editorial, tech and inspiration sites.

Humaan

Responsive web design example: Humaan

These Are Things

Responsive web design example: These Are Things

Andersson-Wise Architects

Responsive web design example: Andersson-Wise Architects

Café Evoke

Responsive web design example: Café Evoke

Stephen Caver

Responsive web design example: Stephen Caver

 

Today without responsive web design your design project cannot be completed. Especially after the sensational success of mobile devices, such as Smartphone’s and tablets the demand for layouts that work for all devices increased rapidly. Presently the all the major web brand adapts responsive web design and this is high time you make all of your web design.