vanderwal.net

Khoi Turns Infocards into Wildcard

This past week one of my favorite designers, Khoi Vinh released a product for iOS that is a great play on information card UI called Wildcard. Khoi has a really good write-up of the journey launching Wildcard.

Wildcard is Best When Used

The real joy is in using Wildcard. Khoi created a wonderfully usable and quite intuitive UI and interaction model all based on information cards, which work wonderfully on mobile and other constrained UI devices. Wildcard is a mix of news summary and scrolling service and product finding service.

Information cards are often mis-used and misunderstood. Both Google and Twitter started in with adding infocards to their design and information structuring a few years back. Both did this as a means to surface well chunked and structured content into small chunks for mobile and other UI constrained interfaces, but also for information scanning and lite representation interfaces and interaction models, like Google Now and the Twitter stream. The model does not work as well on fuller information and content sites, as it constrains in ways that are not moving things forwards, but instead setting false arbitrary constraints.

An Interconnected Service

One of the great pleasures in Wildcard is it not only has its own hold onto for later interaction and service, but it has fully integrated sharing with others and into your own services where you track, store, and manage your information nuggets. It does a really good job of integrating into one’s own personal knowledge flows and capture services.

Far too many services (see (unfortunately) Medium as example of current balkanization from other services) have been shifting to make it difficult for the reader and user of their content to work with the content as they wish and need in their information flows. This fracturing means it is more difficult to share and attribute content (and send people to the site) when blogging or other write-ups.

Khoi has long understood the value of information relationships and information flows for use and reuse, which shows brightly here in Wildcard.

Moved Wildcard to the Front Row

After spending about 15 minutes with Wildcard in my first use of it, it moved to the front row of my “News” folder in my iOS devices. It may become one of my first go to apps to see what is happening in the world around me.

A Model Interaction App

One of the things that struck me in my first use was the intuitive interaction model and information model for moving into a collection and around and deeper in the collection and then back out. Wildcard is really well done on this front. It is one of those things where when I am done using it the ease of use (for the most part - there are one or so “wha?” moment, but for a just launched product that is great) really stands out and I start working through how it works and functions. I’m likely going to have a sit down with it not to use it, but to map out what it is doing, because for me its interaction design is really good and fluid.

It is always a joy to find an app or service that not only does its job well and seems to get out of the way, but works to augment your workflows and existing resources for use and reuse. But, when it stands out as a really easy to use service on first use and good for discovery and exploring, it is worth sitting and better understanding the how and why it does that so I can better think through options and paths for things I am working on or advising.

Kudos Khoi!

"Building the social web" Full-day Workshop in Copenhagen on June 30th

Through the wonderful cosponsoring of FatDUX I am going to be putting on a full-day workshop Building the Social Web on June 30th in Copenhagen, Denmark (the event is actually in Osterbro). This is the Monday following Reboot, where I will be presenting.

I am excited about the workshop as it will be including much of my work from the past nine months on setting social foundations for successful services, both on the web and inside organizations on the intranet. The workshop will help those who are considering, planning, or already working on social sites to improve the success of the services by providing frameworks that help evaluating and guiding the social interactions on the services.

Space is limited for this workshop to 15 seats and after its announcement yesterday there are only 10 seats left as of this moment.

Reading Information and Patterns

The past few weeks and months the subject of reading, analysis, and visualization have been coming up a lot in my talking and chatting with people. These are not new subjects for me as they are long time passions. Part of the discussion the past few weeks have been focussed on what is missing in social bookmarking tools (particularly as one's own bookmarks and tags grows and as the whole service scales) as wells as group discussion monitoring tools, but this discussion is not the focus of this post. The focus is on reading, understanding, and synthesis of information and knowledge.

Not that Reading

I really want to focus on reading. Not exactly reading words, but reading patterns and recognizing patterns and flows to get understanding. After we learn to read a group of letters as a word we start seeing that group of letters as a shape, which is a word. It is this understanding of patterns that interact and are strung together that form the type of reading I have interest in.

Yesterday, Jon Udell posted about analyzing two gymnasts make turns. He was frustrated that the analysis on television lacked good insight (Jon is a former gymnast). Jon, who is fantastic at showing and explaining technologies and interactions to get to the core values and benefits as well as demoing needed directions, applied his great skill and craft on gymnastics. He took two different gymnasts doing the same or similar maneuver frame-by-frame. Jon knew how to read what each gymnast was doing and shared his understanding of how to read the differences.

Similarly a week or so ago an article about the Bloomberg Terminal fantasy redesign along with the high-level explanations and examples of the Bloomberg Terminal brought to mind a similar kind of reading. I have a few friends and acquaintances that live their work life in front of Bloomberg Terminals. The terminals are an incredible flood of information and views all in a very DOS-looking interface. There is a skill and craft in not only understanding the information in the Bloomberg Terminal, but also in learning to read the terminal. One friend I chatted with while he was working (years ago) would glance at the terminal every minute. I had him explain his glancing, which essentially was looking for color shifts in certain parts of the screen and then look for movement of lines and characters in other areas. He just scanned the screen to look for action or alerts. His initial pass was triage to then discern where to focus and possibly dive deeper or pivot for more related information.

The many of the redesign elements of the Bloomberg Terminals understood the reading and ability to understand vast information (in text) or augmented the interface with visualizations that used a treemap (most market analysts are very familiar with the visualization thanks to SmartMoney's useage). But, the Ziba design was sparse. To me it seemed like many of the market knowledge workers used to the Bloomberg Terminal and knew how to read it would wonder where their information had gone.

Simplicity and Reading with Experience

The Ziba solution's simplicity triggers the need in understanding the balance between simplicity just breaking down the complex into smaller easy to understand bits and growing into understanding the bits recollected in a format that is usable through recognition and learned reading skills. The ability to read patterns is learned in many areas of life in sport, craft, and work. Surfers look at the ocean waves and see something very different from those who do not surf in the ebb, flow, breaks, surface currents and under currents. Musicians not only read printed music but also hear music differently from non-musicians, but formally trained musicians read patterns differently from those who have just "picked it up". There has been a push in business toward data dashboards for many years, but most require having the right metrics and good data, as well as good visualizations. The dashboards are an attempt to provide reading information and data with an easier learning curve through visualization and a decreased reliance on deep knowledge.

Getting Somewhere with Reading Patterns

Where this leads it there is a real need in understanding the balance between simplicity and advanced interaction with reading patterns. There is also a need to understand what patterns are already there and how people read them, including when to adhere to these patterns and when to break them. When breaking the patterns there needs to be simple means of learning these new patterns to be read and providing the ability to show improved value from these new patterns. This education process can be short video screen shots, short how-to use the interface or interactions. Building pattern libraries is really helpful.

Next, identify good patterns that are available and understand why they work, particularly why they work for the people that use then and learn how people read them and get different information and understanding through reading the same interface differently. Look at what does not work and where improved tools are needed. Understand what information is really needed for people who are interested in the information and data.

An example of this is Facebook, which has a really good home page for each Facebook member, it is a great digital lifestream of what my friends are doing. It is so much better at expressing flow and actions the people I have stated I have social interest in on Facebook than any other social web tool that came before Facebook. Relative to the individual level, Facebook fails with its interface of the information streams for its groups. Much of the content that is of interest in Facebook happens in the groups, but all the groups tell you is the number of new members, new messages, new videos, and new wall posts. There is much more valuable information tucked in there, such as who has commented that I normally interact with, state the threads that I have participated in that have been recently updated, etc.

This example illustrates there needs to be information to read that has value and could tell a story. Are the right bits of information available that will aid understanding of the underlying data and stories? It the interface helpful? Is it easy to use and can it provide more advanced understanding? Are there easy to find lessons in how to read the interface to get the most information out of it?

Make Nice with Mobile Users Easily

Those interested in making friendly with their mobile users trying to consume their content aimed at the desktop browser market should take a peek at Make Your Site Mobile Friendly by Mike Davidson. This is one method that makes for a little less sweat and keeps some dollars in our budgets for other needs.

Flickr and the Future of the Internet

Peter's post on Flickr Wondering triggers some thoughts that have been gelling for a while, not only about what is good about Flickr, but what is missing on the internet as we try to move forward to mobile use, building for the Personal InfoCloud (allowing the user to better keep information the like attracted to them and find related information), and embracing Ubicomp. What follows is my response to Peter's posting, which I posted here so I could keep better track of it. E-mail feedback is welcome. Enjoy...

You seemed to have hit on the right blend of ideas to bring together. It is Lane's picture component and it is Nadav's integration of play. Flickr is a wonderfully written interactive tool that adds to photo managing and photo sharing in ways that are very easy and seemingly intuitive. The navigations is wonderful (although there are a few tweak that could put it over the top) and the integration of presentational elements (HTML and Flash) is probably the best on the web as they really seem to be the first to understand how to use which tools for what each does best. This leads to an interface that seems quick and responsive and works wonderfully in the hands of many. It does not function perfectly across platforms, yet, but using the open API it is completely possible that it can and will be done in short order. Imagine pulling your favorites or your own gallery onto your mobile device to show to others or just entertain yourself.

Flickr not only has done this phenomenally well, but may have tipped the scales in a couple of areas that are important for the web to move forward. One area is an easy tool to extract a person's vocabulary for what they call things. The other is a social network that makes sense.

First, the easy tool for people to add metadata in their own vocabulary for objects. One of the hinderances of digital environments is the lack of tools to find objects that do not contain words the people seeking them need to make the connection to that object they are desiring. Photos, movies, and audio files have no or limited inherent properties for text searching nor associated metadata. Flickr provides a tool that does this easily, but more importantly shows the importance of the addition of metadata as part of the benefit of the product, which seems to provide incentive to add metadata. Flickr is not the first to go down this path, but it does it in a manner that is light years ahead of nearly all that came before it. The only tools that have come close is HTML and Hyperlinks pointing to these objects, which is not as easy nor intuitive for normal folks as is Flickr. The web moving forward needs to leverage metadata tools that add text addressable means of finding objects.

Second, is the social network. This is a secondary draw to Flickr for many, but it is one that really seems to keep people coming back. It has a high level of attraction for people. Part of this is Flickr actually has a stated reason for being (web-based photo sharing and photo organizing tool), which few of the other social network tools really have (other than Amazon's shared Wish Lists and Linkedin). Flickr has modern life need solved with the ability to store, manage, access, and selectively share ones digital assets (there are many life needs and very few products aim to provide a solution for these life needs or aims to provide such ease of use). The social network component is extremely valuable. I am not sure that Flickr is the best, nor are they the first, but they have made it an easy added value.

Why is social network important? Helping to reduct the coming stench of information that is resultant of the over abundance of information in our digital flow. Sifting through the voluminous seas of bytes needs tools that provide some sorting using predictive methods. Amazon's ratings and that matching to other's similar patterns as well as those we claim as our friends, family, mentors, etc. will be very important in helping tools predict which information gets our initial attention.

As physical space gets annotated with digital layers we will need some means of quickly sorting through the pile of bytes at the location to get a handful that we can skim through. What better tool than one that leverages our social networks. These networks much get much better than they are currently, possibly using broader categories or tags for our personal relationships as well as means of better ranking extended relationships of others as with some people we consider friends we do not have to go far in their group of friends before we run into those who we really do not want to consider relevant in our life structures.

Flickr is showing itself to be a popular tool that has the right elements in place and the right elements done well (or at least well enough) to begin to show the way through the next steps of the web. Flickr is well designed on many levels and hopefully will not only reap the rewards, but also provide inspiration to guide more web-based tools to start getting things right.

Chevy Redesigns with Standards

Chevrolet has redesigned with fully valid (one minor issue in the style sheet) XHTML (strict) and CSS. It is beautiful and wonderfully functional. All the information can be easily copied and pasted to help the discerning car buyer build their own crib sheet. The left navigation (browsing structure) is wonderful and not a silly image, but a definition list that is expandable. The style layer is semantic, which is a great help also (for those IAs who understand). Those of you so inclined, take a look under the hood as there are many good things there.

Keith's Navigation Stress Test

I recently restumbled across Keith Instone's Navigation Stress Test. This will help greatly when trying to sort out browsing structure issues when thinking through how well the user from the whole in the eaves. This is a quick mental jog to ensure the user can find what they are looking for, which will help the site owner's whuffie

The user from the drainpipe

Jeff Lash has posted an on target article at Digital Web, How did you get here? Designing for visitors who don't enter through the home page. This has been issue for to encourage clients to look in their access logs. Most often 40 to 70 percent of a whole site's traffic has their entry point to the site at some other point than the front page. Many clients only think that people enter their site through a home page. The early Web years placed an insane amount of focus on the home page.

I have talked to Jeff about this a while back and he had the same experience with clients and in-house sponsors. Part of the change is eternal search has become much better. Many users head to Google to find what they are seeking rather than going to endpoint.com and clicking from their home page.

This focus shift requires sites to have browsing structures for their users. Test with outside users who are not familiar to the site by starting them in the middle. Check heuristics for each section and page. Does the user know where they are? Can the user find other related information?

Jeff nails this topic, which has more room to grow. Go read.

Indi on site navigation and keeping it under control

Indi Young provides a great guide for building browsing structures in her article Site Navigation: Keeping It Under Control.