What Twitter could look like

Some sketches I made a while ago to illustrate what I think a web-based twitter client could look like. I really like the Tweetdeck application, because it integrates lists in the most obvious way, showing all the posts like a dashboard. I think the basics of Tweetdeck could be very well made into a web-based dashboard.

What it would look like in your browser
Twitter Dashboard design concept (screenshot)
Bigger image [+]

The entire page
Twitter Dashboard design concept
Bigger image [+]

Photographs and other media links should be displayed inline. Like Twitstat does.

Reply and retweet should be inline as well.

Interface experiments for a new live report

Over the last few years I’ve worked on different live reports for different kind of festivals. I like what you can make with (almost) realtime information based on the API’s of other services. For the Urban Explorers festival in May this year I started working on a new interface.

The amount of aggregated information can be overwhelming for people, so I’m looking at how can you keep it understandable for new visitors. Or in the case of Urban Explorers for people who never visited or will never visit the festival. UE is a music and art festival that takes place in different venues in the city of Dordrecht.

Blip API
The idea is to start working with the Blip API. And cover the festival with an interface that only shows video. There will be Twitter coverage and blog posts, but the idea is to create a narrative that can be sorted based on people, performances and maybe venues.

I haven’t exactly figured out what it should look like, but just started to make some interfaces to see what works and what doesn’t. I you have ideas or great examples, please share them in the comments.

Last week the Next Web conference was organized in the Netherlands. This tech conference generates a lot of online media like tagged twitter messages. And was a perfect try-out for working with streaming video and twitter. I combined some old scripts and designs and made https://www.wilbertbaan.nl/thenexthack.


The Next Hack from Wilbert Baan on Vimeo.


The Next Web live video + tweets experiment – Yunoo presentation from Wilbert Baan on Vimeo.

I looked at a full screen interface that could work in a pop-up or fill your entire screen. It looks a bit like my old videoblog (https://www.wilbertbaan.nl/videoblog/index.html). I like these type of interfaces for live events because they are more experience based (click on what you see) instead of search based (like youtube).


Interface Experiment 1 from Wilbert Baan on Vimeo.

I started moving the video, since all tag result pages will give different amount of results the blocked interface looks nice, but it has limits in what it can show. And it looks weird if you haven’t got enough video to fill the entire interface. Both interfaces below are completely dynamic and can show only one item or 30.


Interface Experiment 2 from Wilbert Baan on Vimeo.


Interface Experiment 3 from Wilbert Baan on Vimeo.

I just make interfaces
It’s amazing that all those examples are made on top of infrastructure of other people. Blip is perfect because multiple people can send video using a mobile phone and I can get the source files from the server using the Blip API. It’s pretty weird how much difference you can make with only interfaces.

Last.fm Lovewall
Last year I made the Last.fm lovewall. A bluetooth based installation that matches people based on Last.fm data. This installation or something different build on this technology might find a spot at the festival as well.


Eclectro Last.fm Lovewall (interactive bluetooth installation) from Wilbert Baan on Vimeo.

The Notification Homepage

My Facebook Homepage

This blog post was written for, and published on the Online Journalism Blog.

The last year has seen social networks like Facebook and LinkedIn updating the design of the homepage to turn it more into a notification page: the homepage as a place where you can see what your friends are doing. Your virtual center of the network.

These updates let you know what your friends are up to, but they also let you know what your friends like or share. The social networks often work as recommendation networks as well.

New technology, new business
Google added relevancy and order to hyperlinks and is very useful for the active searcher: someone who’s looking for something. Social networks add relevancy to hyperlinks you’re not searching for. The networks provide you with new information and new articles recommended by virtual friends.

Both are in a business that was traditionally the business of a news provider. Google gives you insight and background information. Social Networks keep you up-to-date and recommend information.

Does this design shift also affect the future design of news websites?
The average news website probably publishes around a hundred articles every 24 hours. We can’t and don’t want to read all the articles a news website publishes. We need filtering mechanisms.

News websites add hierarchy to the news by presenting the most important things first. But this is a mass hierarchy. It’s not personal. The sorting is based on what the news website thinks will interest most people. And this works very well for the most important news.

The news website is a large pile of stories. Is this still in the best interest for a reader? His or her most valuable asset is time. Sure there is some news you need to know about, but you get to know about the important facts through your social networks as well.

And if you know the facts you can learn more by hitting the search button. The news website is still a database with a single entry, the frontpage. This makes it vulnerable in a distributed environment.

Distributed environment
The future of information presentation (at least for the long tail of information) will probably be user-centered. Mobile devices are extremely user-centered. Successful access points like interfaces and devices provide readers with the most relevant information.

Time is our most valuable asset and the reduction of noise is a serious proposition for any new service. News itself is relevant, there is no question about this, but how do you deliver your content in a distributed environment?

Type of environments
There are different environments.

1. Get your content on other platforms through syndication or API’s. The problem is monetization, although you could distribute the news and link back to your website with hyperlinks in the text that link to more in-depth coverage.

2. Your content on your platform with a personalized presentation based on your own network or an external (social) network.

3. The current form of presentation where your content is on your platform presented in your hierarchy.

What can you do as a news website to be more relevant? Should news websites learn from the design of social networks and move to a more user centered approach? The New York Times is already doing this with Times People and with EN.nl (the project I work on) we created a personal selection based on your reading habbits.

Your Thoughts
What design elements that originated in social networks do you think could very well be applied to the basics or every major news homepage? Or what are the arguments not to implement this kind of functionality?

– Share articles with your friends
– See on what articles your friends commented
– See what your friends are reading
– See what news is happening close to your friends
– See news topics your friends subscribed to
– Discuss an article only with your friends

Where we are with EN.nl

Moby Roelandp Vijzelgracht
This is an update about the EN website. In my holiday developer Ayco released a new version with a frontpage and some other special features.

Frontpage
EN.nl now has a frontpage. In the right column we are personalizing news based on your reading behavior. EN takes the tags from the articles you have read and uses these to scan incoming articles.

The order of the frontpage is created by how the site is used by its readers and the impact of the news given by the press agency. It’s a dynamic presentation created out of a mix of variables from discussion, to pageviews, to urgency, to incoming links and a few more.

The frontpage also shows you two lists and a picture that are personal to you. In the right column it shows you a short list containing articles that might interest you. You see a second list with articles that are read in your network and you see a third picture that is a photograph from the news that might interest you.

The other thing we created are related articles based on the distance between tags, using a tag-relation table. This distance can create clusters of information that might be interesting in the future to create groups, but it also generates related articles in a much more refined way. Two articles don’t need tags in common to be related to each other.

Where is this heading
For the last weeks we have been using the partly personalized frontpage and we are noticing that is works pretty good. You don’t miss the big news, but you do get a more personalized presentation and you see what your friends are reading. It works this well that it might deserve a more prominent presentation on the frontpage.

For example I don’t read much about soccer and instead of a soccer picture at the bottom of the page (which a colleague had) I did see a picture of a Dutch politician at that moment more relevant to me.

Personalization is good, but of equal importance is the social aspect. News is always about sharing and talking about it with your friends and colleagues. At this moment we have created so much different parameters that it gives us more options to sort information than we could have ever expected.

How to build a community?
So how should we build a community or create interaction with your friends or like minded?

Facebook is switching its homepage to a notification page. It shows you what your friends are doing (screenshot). The most exciting pages of social web services are the pages that show you what is going on in your network. This makes the service less a service you go to, but more a circle around you. Flickr does this with recent uploads from your friends, LinkedIn with your contacts switching jobs all the time, and Twitter is all about it.

Survival of the fittest
Why shouldn’t a news website be user centered? I was kind of sceptic about this idea at first. Since we claim news isn’t something that is personal. But it is. A newspaper is becoming more and more something that is personal. With less time to read we scan the headlines and only pick the articles we like. First you read the things that interested you. If you have time left you start to read articles that are second choice. This isn’t something new, only with less time to spend on the medium we stopped reading our second choices.

Make it small
The most interesting social websites that create a social experience are user centered. Can this be done with news as well? And more important does it add extra value to the news? Why would someone use a certain news website, when news is omnipresent? What can you add to something that has ‘no value’ based on content and originality? Besides usability, the only thing you can add is choice. What is the focus of a news website? Will it report left news more prominent? Is it more about gossip? Will it present news as it evolves and before the facts are all clear or will it wait until the guessing is over?

Ideas
Here are just some thoughts about how a more social and personal experience could be designed. These are small steps towards a user-centered news website.

1. To create the feeling you are in a network you need a feed with updates of your network. What are the people you know doing on this website. This could be updates from your friends (design screenshot) about what articles they favorite, read, commented on or edited.

2. There could be a shoutbox that enables you to talk about the news (design screenshot). Just share thoughts. You could say that you don’t think the stock market will recover soon. Just thoughts so other people in the network can get to know you and see what topics are hot. Or those thoughts can also be relevant to a cluster of news instead of a single article. Like the talks you have in a bar of café.

3. Create the website only around you and your friends. For example it could be possible to look at the website and only see the comments your friends made on articles. You could choose to discuss the news only with your friends (making it more personal) or to switch your friends off and discuss it with the world.

4. Use your reading behavior to help you find other interesting things. EN could use your profile to aggregate all different kind of sites and recommend articles. For example if you are reading a lot about the stock market. EN could go to a service like Technorati get the blogs that write about topics you like and use the Technorati relevancy to sort and recommend you blogs or further readings.

5. Use article meta information to connect to other websites and automatically enrich articles on EN with this information. For example find pictures about a news event made by people witnessing it.

6. These are all options easy to create in EN from a technical point of view. Help me out. What is it you think that is interesting and makes online news reading a more social experience?

Making the web more live

CNN Breaking News
The web is becoming a more live medium, the medium itself isn’t changing it is how we publish to it. I think the ‘live web’ is the most exiting development since the rise of social networks. You write a Twitter notification on your mobile phone, post a picture to the web or stream a live video with Qik or Seesmic. Often recording is publishing.

When you write a blog or create a podcast your entry has context in itself. It has a start and it ends. Most postings on micro blogs don’t have context in the messages. The context is in the stream or in time. For example Twitter messages often make sense in your personal timeline or in the conversation within your personal network.

Twitter and Qik are just the first services. Realtime platform independent micro services, that distribute contextless fragments of information are here to stay.

This sense of a ‘live medium’ is something that is changing the web as it is and how we use it. It will change search, or at least sorting search results and it will change reporting news.

A service like Twitter makes news travel fast. This makes it the #1 breaking news source for a lot of people. Why? Because it is reporting as it is happening. It isn’t always right, but it is reporting, open for conversation and correcting itself. It is live coverage and it is a storytelling experience.

News on the web is presented like news on paper. This is good since text on the web is – apart from certain screen specific style rules – the same as on paper. An article is written, checked and published.

Spreading the news
These services like Twitter are making reporting news a more public process. For example if something happens the first people who notice are there when it happens. Uploading messages, pictures and video, to a personal community or group of friends.

With Twitter people start repeating (or retweeting) messages distributing the news among followers and informing a very large audience within minutes. This is the signaling part. It’s not about being a citizen journalist. It is about telling your friends what you are doing, or what you are seeing.

The signal reaches the audience at the same time it reaches the journalist. A journalist has to check the story, is it true? Should I publish about this or wait until it is checked? The reader is expecting that his favorite news website knows more about it and visits the website after hearing about the news. Often resulting in a bad user experience, since there is nothing on the news website about the subject.

What is the role of journalists and media in this? Should they directly report serious rumors? Should they check for more sources. I don’t know. It has to be somewhere in the middle I think. A situation where journalists are producing with updated versions.

CNN
I think CNN is giving this a very prominent place on the CNN website. Maybe because they are from television and reporting breaking news is what they are good at. They are using storytelling mechanisms on the website. Reporting what is happening right now, and directly updating it when the story turns out to be something different.

These are the breaking news messages CNN showed last week. I heard the news about Hillary ending her campaign through Twitter and CNN was one of the few news websites with the news on it.
CNN before
CNN message before

CNN after
CNN message after

Your thoughts
What are your thoughts about this? When should news be published on a web site and should we adapt the design of news sites to make space for a more storytelling ‘as-it-is-happening’ approach? Or does this make news websites vulnerable for misinforming the audience?

This blog post was published on the Online Journalism Blog