Month: August 2019

From A to B: 4 Tips in Designing Timelines for Your Website

Posted on by Mario

web design tips

Perhaps because the people I’m close with are all equipped with an engineering degree but I just recently realized that the majority of my friends aren’t fond of history. To me history is fascinating in its capability to infuriate. Time and time again, I visited a museum, watched a historical film or read a historical novel only to be dismayed that the problems detailed in those things are still present in the time we currently live in. History was supposed to help us make sense of the present and avoid the mistakes of our past but it seems that human folly will always find a way.

History, at its most basic form, is a chronological process. To help make sense of the past, history is typically represented as a series of events that happens at particular moments in time showed in a linear fashion. This representation is typically referred to as a timeline and they can help us chart the chronological history of a particular subject. This can be very useful in the world of web design as you can use this particular style of design to help convey certain information that works best when presented in a chronological order, such as the history of your company.

The various uses of a timeline

Depending on what you choose to portray, timeline can be used in a variety of a different ways. In the subject of internet for example, the timeline can be used to detail the history of the internet itself, starting from the use of ARPANET in the United States and up until now with several important milestones included in the timeline. However, the timeline can also be used to portray the chronological transformation of the internet itself. How the internet was used and what kind of transformation it transports at the beginning is vastly different from how they’re used now, and the timeline can be used to show this gradual progress.

The timeline can also be used to detail the journey of a specific subject. For example, now that the issue of environment is at the forefront of society, I’ve seen timelines being used to portray how a product is made to ensure transparency. The timeline details the journey of the product from the sourcing of the material up until they arrive at the customer’s doorstep, ensuring that every step of the process is up to proper ethical standards. For a more practical use, the timeline could also be used as an itinerary when you’re holding an event.

The timeline is useful not just for simple eye-candy, they can simplify even the most complex of histories to digestible chunks and make them easier to follow and understand. However, this capability depends on the design of the timeline itself as you want the information displayed on the timeline to be understandable without overcrowding them. The timeline is like a summary and you have to be smart and selective about what you’re displaying on screen but luckily, the following 4 tips should be enough to get you started.

The labels and explanations must be clear and consistent

I’ve hinted at several uses for a timeline in the above section and in each of those respective uses, the timeline works best with certain types of labels and/or information. In a historical timeline for example, dates would work best as a label accompanied by information of what milestone occurred at that particular date. By contrast, when the timeline is used to detail a particular process, the label should be used to detail each step of the process, accompanied by information of what happens during that particular step.

When designing the timeline, it’s important to keep these labels and information consistent. If the first section of the timeline is signified by a particular year, every succeeding section must also be signified by a year and that you shouldn’t mix and match multiple types of labels in a single timeline. Keep the information short and to the point as well as you wouldn’t want to overwhelm the timeline with text. If you have more information available on hand, include a hyperlink in the timeline if you have to instead of adding more text.

Use color coding to signify different sections

If the timeline is divided into a dozen sections, that doesn’t mean you have to use a dozen colors. You can simply use 2 or 3 colors alternated with each other. The goal here is to increase the legibility of the timeline and to differentiate between one section and the other. This can be particularly useful when two milestones occur in the same year as you can still use different colors to signify that the two milestones are independent of each other.

Stick to simple shapes

The style is referred to as timeline for a reason, because line works best when trying to present information in chronological order. This isn’t to say that using a zig-zagging format is strictly forbidden, they actually make very effective use of space, but you should only use them when you know what you’re doing. Still, timeline is much easier to digest since it’s just a line so unless space is really an issue, stick to a simple horizontal or vertical line.

Use icons or helpful illustrations to help illustrate each section

As I’ve hinted repeatedly, you don’t want to inundate the timeline with text and as a possible solution; you can use small icons or illustrations to help explain what a particular section in the timeline is about. The image doesn’t have to be complex; in fact simplicity is actually preferred as the point is to inform the users, not to showcase your artistic capabilities. If the timeline is used to showcase the evolution of a product or a tool, using photos of the actual product could also work.

Simplifying Choices: How to Take Advantage of Hick’s Law in Web Development

Posted on by Mario

web development tips

The only thing worse than making a decision for people dealing with anxiety is making a decision where there are more than a dozen options available. While thankfully not all of us have to deal with severe anxiety issues all the time, I’m pretty sure there was at least one point in our lives where we were overwhelmed by the choices that are presented to us. I’ve been there plenty of times when trying to book a hotel for the holidays, when trying to pick up a new pair of jeans and when digging through the thousands of video games that are on sale during Steam’s annual summer and Christmas sale events.

Variety is indeed the spice of life but just as how things are when you’re cooking, it is actually possible to overseason your dishes. Everything should always be in moderation and sometimes, putting a limit on the options that are available to customers might actually be a good idea. Too much of everything can lead to anxiety, indecision and eventually, to lost sales. Obviously, this is something that every business would very much like to avoid, resulting in the application of Hick’s Law in the world of web development.

Simplifying the decision-making process

Also commonly referred to as Hick-Hyman Law and first theorized by psychologists William Edmund Hick and Ray Hyman, Hick’s law posits that the time it takes for a person to make a decision depends on the amount of available options and increasing the number of choices will increase the decision time on a logarithmic basis. There’s actually a mathematical formula that details this law in greater detail but in this piece, I’m just going to focus on the big picture. Hick’s Law sounds maddeningly obvious but in the pursuit of offering the most comprehensive list of features, this law tends to get overlooked by web designers and developers.

As a business owner, you’re regularly advised to cater to everybody’s needs and at its most basic interpretation, it does seem that Hick’s Law explicitly argues against that idea. On the surface, that might be true but in practice, there’s more to Hick’s Law than just simply reducing the number of available choices. The ultimate goal of Hick’s Law is to simplify the decision-making process so that even the most complex of decisions and/or actions can still be executed without laboring of what this or that will do.

In interface design, this idea manifests as the acronym K.I.S.S. or “Keep It Simple Stupid”, pardon the language. In certain cases, there would be no simply avoiding complexity but the challenge lies in making that complexity accessible. Manual controls in any kind of camera is comprehensive by design and removing that level of comprehensiveness would defeat the point of manual controls entirely so you’re going to have to figure out a way to ease users into the process. In the world of web development, the gentle hands of Hick’s Law could be used in several different ways.

Introduce everything in bite-sized chunks

In an e-commerce platform for example, instead of just simply adopting a free-for-all approach, you’re going to want to use proper categorization for your products so as not to overwhelm your customers. First, you start with category A, B and C. One users picked category A, they’re presented with category AA, AB and AC and this continues until said user would be able to find exactly what they’re looking for. Using this categorization approach, you could have thousands of available items but users would have the option of viewing only a dozen of them at any given moment, which makes it that much more manageable.

Another way of adopting this bite-sized approach is to introduce everything in a series of steps. This is very important in a checkout or a registration process where instead of presenting every forms and boxes a user have to check, you divide them into a series of steps and left out the unnecessary information for later. If there’s anything the human race have in common, it’s our disdain for bureaucracy, standing in lines and filling forms and anything you can do to make them as painless as possible would definitely be appreciated.

Hide the complexity of your interface

Just as how we’re advised to not find out how sausages are made, businesses should endeavor to keep the complexity of their system hidden from view unless the user specifically requests to see them. For example, manual controls in mirrorless cameras are typically hidden from view unless the user specifically chooses to enable manual controls. Just as with cameras, you want to keep unnecessary customization options hidden from view, at least at the beginning, to keep users from getting overwhelmed.

Make it so that each option is clearly distinct from each other

It’s pretty common for businesses that in the interest of covering their bases, they end up offering several options to users that are too similar to each other. This isn’t practical in two different ways since it could lead to your products cannibalizing each other’s sales and could very well end up confusing your users. To alleviate this issue, offer users with several pre-packaged selections and then provide extra customization options inside the product page using the approach described in the previous section. This way, you could satisfy users that are looking for something simple while still satisfying those that are looking for more granular options.