Exploring the Human-Centric Web

20140210-091715.jpg

Some time ago I published an article describing a workflow which supports and emphasizes human-centric thinking in web design. In today’s artical, we’ll examining websites that apply this methodology and see how human-centric design has contributed to their success.


Looking Back

First of all, here’s a reminder of how human-centric thinking can be applied to the web.

  1. Exploration: A website is a medium commonly used to solve something, both for the targeted audience and for the client. Exploration is about understanding stakeholders, even those who aren’t obvious.
  2. Design: Human-centric design is not about creating the perfect product, it’s about finding the best solution, which is often a compromise.
  3. Implementation: Each update is followed by a learning cycle. Iterate and improve.

Case Studies

Let’s critique some familiar websites.

Squarespace

Squarespace succesfully aim to make the process of creating a website accessible and beautiful. They excel in understanding the problems of the stakeholders involved. They provide a product for the small photographer building his online portfolio, the online shop owner who’s looking for a sustainable platform and the expert developer looking for full control. They examined the common problems people encounter when creating an online presence and provided a solution.

This philosophy reflects in the design. The Squarespace landing page comprises different stories, as every website has a different personality and purpose. Instead of featuring a blank solution that the user can customize, they show different kinds of customisation, which triggers the user more easily as they discover the possibilities of the product.

Take a look at the screenshots below and see how they apply design intelligently.

Squarespace

Squarespace shows users the different steps they have to take. Pay attention to the filter options for the templates. Do you run a business? A restaurant? Or are you looking for a portfolio?
Squarespace

The dashboard to manage your website is simple enough for everyone to understand.
Squarespace

This pricing page makes sense and shows users the differences between the options in an obvious way.

Shopify

Shopify is another good example. They have made the process of starting an e-commerce website more accessible, holding the user’s hands as they take care of all the necessary steps.

Shopify

Shopify helps users by making the challenging parts of managing an e-commerce website as effortless as possible.
Shopify

One of the best announcement pages I’ve ever seen. Concise and structured.

Artsy

Bringing physical art to a digital space is a challenging objective. The Artsy team understands how art is very visual and this is reflected in the design of their website.

Both for experts and non-experts alike, it’s accessible to filter through artwork. It’s possible to filter on subject matter, medium and technique, style and movement, price and category. The ‘View in Room’ option is a perfect example of human-centric design thinking.

Artsy

Artsy features extensive filtering options.
Artsy

The square in the top left corner of the purple window gives the user an impression of how big the artwork is compared to a human.
Artsy

The ‘View in Room’ option gives the user a perfect idea how big a piece of art would be if they bought it.

They’ve managed to make the same website easy to use both for experts and those with a slight curiosity in art. Take a peek and examine its flow and design choices.

Tumblr

If you ever have the opportunity to work with a platform that supports content created by a community, thinking primarily from the users’ perspective improves your product tremendously.

There are many websites that consider the community as their primary stakeholder (Tumblr, Twitter and Instagram for example). Without users, their business model is nothing.

Tumblr explores ways to make the use of their platform simple for users. This shows in the user interface design.

Tumblr

Example of Tumblr’s accessible user interface design.

Additionally, it’s interesting to compare how Tumblr and Facebook work with advertisements. Many feel that Tumblr doesn’t disrupt the user flow with advertisements quite as much as Facebook does, which can be as much a design choice as a business choice.

Tumblr

Tumblr’s less obvious advertising.

Steam

This is probably a surprising website to take a look at. Although it might be outdated visually, they nailed the concept of providing an e-commerce and community website that is loved by millions.

The continuous development, deals and support for different kind of developers has attracted a large community. Recently, they added reviews for games, making it easier for people to make smart decisions when purchasing a new game. Including the amount of hours played to a game review improves credibility. This is both beneficial for users while assuring developers game reviews are fair. It’s one small design choice which has a tremendous amount of influence on the e-commerce behavior of users.

Steam

You could apply this idea to your next e-commerce website by adding a tag to the user’s profile if they’ve bought the product when they review it.

As much as Steam supports gamers, developers also have the opportunity to interact with the community connected with their game, or the steam community as a whole to get support for their next project.

Threadless

Does #threadpics or #teestyle ring a bell? Threadless is a great example how you can make an e-commerce website with a focus on retaining and expanding a community, much in the style of Steam.

The design is streamlined to support both buyers and creators.

Steam

Finding this balance can be a tough challenge. Whenever you’re working on such a project, one way to make sure you retain this balance is by creating a user journey map. This will highlight potential weak points in the navigation flow when they are inconsistent and confusing for the targeted type of user.

Print the designs of your website, use a marker to make actual connections and think about your design decisions. Actually involve potential users and let them interact with a prototype. What feedback do you receive?

Tuts+

The latest incarnation of Tuts+ (referred to affectionately as “the Hub”) is the result of centralizing and improving the existing Tuts+ websites, and understanding, once again, the stakeholders. These stakeholders include you, the reader, authors and advertisers.

The release of Tuts+ courses is an example of how each product or service undergoes a learning cycle with each release, always recognising the opportunity for improvement.

Tutsplus

When you compare the individual Tuts+ websites and the new hub, you’ll notice a couple of differences. The new hub is responsive, organized into topics relevant to your interest, and provides a cleaner interface for readers and advertisers alike. As authors, we have improved visibility and the related post section offers us the opportunity to showcase more of our writing.


Conclusion

Whenever I examine websites such as Threadless, Tumblr and Artsy, I’m continuously reminded how it’s perfectly possible to design something amazing for all types of users, all whilst keeping the non-visible stakeholders happy.

What should you keep in mind?

  • Understand your different types of users and find the best balance in designing for those users: interface, branding, features. There’s no single perfect solution, only the best possible compromise.
  • Compare the advertising techniques of Facebook and Tumblr. Ask yourself how their design choices make an obvious difference for the users and advertisers. What’s better for who and why? What can you learn from this in your next project with advertisers?
  • Users will be triggered more easily when they feel familiar with your product through showing customised examples, Squarespace and #threadpics is a good example.
  • Tiny but smart design choices can have a tremendous influence. Showing the amount of hours played in the review of a Steam game is a good example. What are users (or other stakeholders) curious about? Provide what users consider valuable, even if they themselves don’t recognise it yet.
  • Respect that everything you create has the opportunity to improve based on how stakeholders interact with your product.
  • Tuts+ Web Design