Jonatan Littke

This is the blog of Jonatan Littke, a Swedish entrepreneur, designer and developer.

.

← Home

Personal web design

Imagine walking into a grocery store and all the items you never buy are automatically filtered away, leaving only what you really want to buy.

Imagine that the moment you entered, the music changes into tunes you prefer, the colors of the walls – the entire interior design, in fact – changes into something customized for you.

What if the store proposed what things you wanted to buy today and wrapped those in a bag for you, and all you’d have to do is confirm the total price, take the bag and go home? Would that be seductive enough for you?

You see, there’s so much data to be extracted from my behavior in that store that the proposed customimzations probably would be quite close to what I want. They’d know that on Sunday evenings I always buy pizza for myself and the kids, it’s a special thing we’ve got going. And red apples! Oh, I loves those, but only if they’re big and juicy enough. Weekdays after work I’m more in a rush though, so I just want my basic stuff and no extras, no music or anything.

Now, even if a physical store does have access to some of the data about me (if I’ve swiped my membership card on every purchase, for example), they still can’t rearrange the shop to make it personal for everyone entering. They have to please everyone with one single layout (interface) and one single set of items (content).

But on the web we don’t.

We’re still building web sites as if they were physical stores or locations: It’s the same deal for everyone.

We can do far better. And I’d like to call this personal web design.

Adapt the content

If you have a person who’s been visiting your sports website two times before and on both of those times he’s clicked Sports and then Basketball, why not present the latest NBA news on the front page on his next visit? Keep the links to other stuff he may find interesting, but personalize his experience as much as you can – he’ll be happier that way. You’ll be happier that way: imagine that every website you visited could guess your purpose! And helped you achieve your current goals as quickly as possible?

This is what Amazon’s Recommended for You, Google’s Search history personalization and Facebook’s News feed algorithm are doing.

Adapt the interface

This is where it gets really interesting. Here’s a mockup of SJ (Sweden’s largest train operator), utilizing personal web design:

SJ.se - personalized

This interface could be presented to someone who regularly commutes between two cities and who wants to book his trip home. We know that’s what he wants because that’s what he’s been doing every time he’s been visiting on Fridays afternoons.

On Sunday evenings, however, he’s booking the same route but in the other direction. Let’s optimize his experience for this purpose and present the next three trips with available seats. We can also add a purchase button on the front page to provide a one-click purchase option.

What’s more, we could auto-suggest this person’s name, email and phone number (plus possibly credit card number if we ask for a password) based on what he entered the last time he booked something, saving him the time it takes to refill the input fields that he’s done so many times before.

SJ.se - ability to choose another person

If there are more than one person who visited previously, we can allow a choice of previously entered data to make the interaction smoother.

Note that these are not accounts, simply automatic personalizations based on previous interactions with the website.

Identify and adapt to the visitor’s purpose

The key to personal web design is to try to identify the user’s purpose based on whatever information available to you, especially including his previous interactions with your site (or application).

  • What is the user’s most common navigation path? Can we make it shorter?
  • Which buttons or links are used the most? Can we make these bigger or more prominent?
  • Are there other tasks the user is carrying out repeatedly? Can we automate or remember these?
  • Which stuff is not used as frequently? Can we hide away something?
  • What are other people with similar data using or looking for?

If you have no recorded information about your visitor, you still have plenty of data available:

  • Country/city (based on IP)
  • Time of visit (late friday evening? monday morning at work?)
  • Preferred language (language of browser)
  • Computer specs
  • Keyboard typing speed (poweruser or rookie?)
  • Data from facebook/twitter? etc

Gather as much information as you can and give the user what he most likely wants, based on either:

  • his previous interactions with your website or
  • other persons with similar data.

User-centered websites

We have to build web sites where the user is in the center and everything revolves around the individual, not in the other way around.

User-centered websites

Today we build static one-size-fits-all websites (with the exception of screen size and sometimes language/country) where instead we could build adaptive, automatically personalized sites that understands the purpose of the user and minimizes the time spent until her goals are achieved.

When asking the iPhone’s Siri the question How do I get home?, Siri takes your current location, your home location and transportation data to give you the most convenient way to get home. This is personalization at it’s finest.

Offer a way out

Lastly, allow users to disable personalization. There are times your guesses will be wrong and you’ll offer a suboptimal experience for your user. Remember, these adaptations we’re making are there to make it easier for the user. Sometimes a static website that looks the same every time will be simpler to use.

If the user is visiting with a privacy mode enabled (such as Chrome’s Incognite mode or Firefox’s Private Browsing), don’t record any data. You may also want to consider not to record information if a user has the Do-not-track feature enabled.

Conclusion

Let’s start building apps and websites that deeply care about the people using them. Adapt and automatically improve your interface and content to match the purpose and level of your user, in real-time.

There’s no need to expose the full breadth of your application’s features to a user who’s there for the first time. At the same time, don’t give your power users lengthy tutorials and hidden complexity when they may be ready for and want more powerful tools to perform their task.

Personal web design. We can do it!