Reply to: Why Do All Websites Look the Same?

A few days ago I came across a featured article by Boris Müller. Renowned Professor for Interaction Design at the University of Applied Sciences Potsdam.

The article states that the internet lacks imagination.

I admit, that I don’t know Boris in person, but I started following his work during my studies at the State University of Design, Karlsruhe in 2001. Great stuff!

Where I agree: Of course there are web designers who don’t care so much about Typography, and Experimentation, and who think that Dribbble content is the ONE source for inspiration…

But, after reading the article several times, I am firmly convinced that the German design landscape will face serious setbacks. In the near future, we’ll see growing up young talented designers, largely unqualified, underpaid and devalued. My analysis and opinion should not be seen as an offense but as the beginning of an open dialogue about a more contemporary German design practice in Universities. One that is less academic.

Let’s start with some hypotheses from the article.

1. Today’s internet is bland.
2. […] seems to be driven by technical and ideological constraints.
3. Nothing is truly designed, it’s simply assumed.
4. Templates are content agnostic.
5. Form should both reflect and shape content.
6. [Too obedient] to visual conformity, economic viability, and assumed expectations.
7. “Don’t confuse communication with legibility”.
8. If you equate stereotypes with usability, you have understood neither visual design nor human-centered design.
9. Rediscover the web as a space for design experiments.

Please add or correct if I missed something.

In my opinion the web is everything but bland. We’re still exploring new frontiers. We’re all Starfleet members. Pioneers are ideologists. Technology is not constraining, but rather enables everybody to build his own starship. As opposed to desktop publishing, building digital experiences is way less based on assumptions, since everything is measurable. Form should stay in the background, and just be there to ease navigation and action. Legibility is a first guiding principle — on any screen size. We’ve seen Brutalist Webdesign rising, and that’s a good thing. But instead of treating a whole digital experience as an experiment we should combine product semantics with radical aesthetics. To make my view clear I reimagined the HN Redesign.

The Hacker News Redesign

I can relate to the many polemical objections in the essay, but the results –even if the experiment is exciting — lack a vital understanding of the underlying purpose and meaning of the goals set by the website, the core technology, and it’s business- and user-centered metrics. I don’t know if the briefing was misguiding if there was a briefing at all, and what led to specific design choices.

But the initial Redesign ignores the fact that entrepreneurs are an essential target group, and that comments/threads make 50% of the website’s value. If the underlying algorithms are complex, why not make the website way more easy to digest?

Humans do not see and act on the physical qualities of things, but on what they mean to them. — The Semantic Turn, 2006.

My major critique is that Hacker News should not be treated like a flyer or poster that aims to be quirky, and beautiful at the same time, and I feel that the students were mainly focused on aesthetics and less on product semantics.

Krippendorff suggests that design has to shift gears from a preoccupation with appearance and surfaces of tangible products to designing material and social artifacts that have a chance to make sense to their users, aid larger communities, and support a society that is reconstructing itself in unprecedented ways and at record speed. — The Semantic Turn, 2006.

HN IS NOT EQUAL visual poetry.
HN IS EQUAL a carrier for meaningful information AND a product.
HN IS EQUAL a place that aids a larger community.

So, before we start thinking about how to visualize something, we need to do some thoughtful homework.

Here are some principles on how to design on purpose.

1. The Foundation
   e.g. Background information, goals and key results, core technology
2. The Purpose
   e.g. User needs, core functions, metrics, interaction models, etc.
3. The Product Architecture
4. The Aesthetics (AND only then)

To fuel these principles, we first need to dig deep into Hacker News.

Background information

1. Hacker News is a reading list from and for the tech and entrepreneur community.
2. Originally called Startup News.
3. The site was started by Paul Graham, co-founder of the seed accelerator Y Combinator, in 2007.
4. Users are tech-savvy and keenly aware of where the industry is moving because, in many cases, they’re the people moving it.
5. Written with Arc, a proprietary language designed for exploratory programming, one that makes programs brief and malleable.

Goals

1. Post anything that gratifies one’s intellectual curiosity.
2. The site has a proactive attitude in moderating content — by its users.
3. One of Graham’s initial goals for Hacker News was to allow Y Combinator to get to know would-be founders before they apply in the YC accelerator program.

Why do people hang out on HN?

As a user, they want to satisfy their intellectual curiosity by:

1. reading the best articles on computer science and entrepreneurship.
2. following the vivid discussions led by a trustworthy tech community.
   50% of the value of HN comes from reading the comments.

Downsides of the interface

1. Trying to keep up with the HN fire-hose.
2. Valuing which story is worth to be read and which threads to be followed.

Weighing story attributes (decreasing order)

1. Score (in time) 0.3
2. Comment Count (in time) 0.3
3. Title 0.2
4. URL 0.15
5. Author + Karma 0.05

What we do know

1. Filter for best, top and new stories
2. Ranking probability model (impact by time)
3. How to weigh story attributes
4. How to weigh stories
5. At least 50% of HN value comes from reading threads.
6. How other people tried to reverse engineer HN.
7. How users try alternative ways to find the right content on HN.

This is pretty much more than just guessing how to redesign HN as stated in the mentioned article.

What we don’t know

1. Comments’ score (but that’s less important).
2. The exact ranking algorithm.

What’s missing (The human factor)
DMS (Designers’ Missing Skills). In my 15y+ design experience in Germany, I wished I would have met more Designers that embed these three tools in their work. Because today you just can’t build digital experiences without it.

1. Data Science
2. Business Metrics
3. Evidence-based Methods

What we want to achieve
Make the User Experience at least 10x better than now.

1. Give comments/threads much more importance.
2. Weigh stories based on their score.
3. Design attributes by size based on their importance.
4. Create a radical, surprising, and evocative view on Hacker News.

Now that’s pretty much a briefing, and time to build the product.

The Hacker News Re-Redesign

HN Overview

HN Story Detail

The Design is built on a strict 5x5px grid/12-col layout.

Here’s the original article.
https://medium.com/s/story/on-the-visual-weariness-of-the-web-8af1c969ce73.