Archive for October, 2007

On Wikipedias design (or lack thereof)

Oct 07
21

The content of the Wikipedia is amazing. What’s more amazing is that this content was created despite many obvious flaws in the design of the site.  Here are the main ones I’ve seen.

Wiki article

There are two ways to use a large information site like the Wikipedia. Browsing and Searching. Wikipedia does both fairly poorly. The site is difficult to browse since there is little primary navigation and it’s difficult to search because the search results are presented poorly. While the content of the site grows by leaps and bounds the interface and design of the Wikipedia has seen seemingly little change.

  1. Search belongs near the top of the page. This is now a general convention across sites and this is where users are likely to look.
  2. The top level navigation belongs at location number 2. Instead of top level navigation we have tools for editing the content and viewing history. A typical user will consume content and only 1-2% will create content. Having the editing features front and center gives a bias to the editing and makes the navigation harder to use.
  3. The main navigation doesn’t help users find content. An appropriate top level navigation will encourage browsing and may include high level headings for an encyclopedia. Things like Glossaries, Global Timelines, People, Countries, Animals, etc. All this stuff does exist but it’s not organized in the navigation or in a well structured way. Instead the navigation encourages users to go to a random page.
  4. The Wikipedia is overly-hyperlinked. In other words since it’s easy to edit. Lots of people don’t contribute content but instead add brackets. This creates a link. While creating some links is useful the absurd amount of linking actually makes the content more difficult to understand. Instead of consolidating articles things seem to sprawl and branch off into their own articles. Why is the word speedometer hyperlinked in the User Interface article?  Maybe I should have fixed that? It’s bad information architecture and bad design.  There’s no easy way to find related articles or know if you are reading the main article or a branch.Wiki editing
  5. When editing a page the toolbar is inappropriate:
    Wiki toolbar
    We start off ok with bold and italic and underline. Then we go off the deep end. The icons are non standard and the commands are awkward. I’m not sure why this wheel was re-invented and why it was done so poorly. WordPad and TextEdit have had this worked out for 10 years.
  6. It’s 2007 can we have a WYSIWYG editor for content? Every other site has figured out how to do this. You can’t see what you’re doing and the markup is a bastardized version of HTML. This creates an unnecessarily high hurdle for people who want to add or edit content. Doing something simple like adding an image is unnecessarily complex for a site that encourages end-user participation.

    Wiki Search

  7. Search results should show a basic synopsis, last edit date and hit highlighting so you can tell if the search hit is appropriate. The lack of information about a particular search result makes it difficult to pick a match.  it’s also difficult to tell if an article is fresh or stale and how stable a particular article is.  Without exploring the history of an article you can’t tell if it’s undergoing a lot of change or if it’s been solid for years.

    Because the content of the Wiki is editable by anyone it’s important to convey how stale the information is. This is true in search and on the page iteself. Providing some metric of article age & volatility in search results and on pages will help users find more accurate and appropriate results.

  8. Search pageination belongs at the bottom of the page, not the top. Why would you want to page if you haven’t even seen the first page of results?
  9. It’s customary to provide a way to perform an advanced search to help you find the right topic. For example show me results for ‘Apple’ that match the fruit not the computer company. Search works for exact matches but not for concept matches.
  10. This one is a bonus tip for Google. Don’t list wiki articles in the main section of results. The same way that dictionary listings aren’t shown in the main area of results. A dictionary and encyclopedia are special and should both be presented differently from natural search results.

Posted in Design, Misc., Review, User Interface | 7 Comments »

My phone is my digital wallet

Oct 07
12

I left my wallet at home today but I remembered my phone. That got me thinking. Why can’t my phone be my wallet? I have too much crap in my wallet. Credit cards, shopping cards, health cards, drivers license, social security info, etc, etc. I propose a new ID system that lives on your phone. Here’s a picture:

Your ID lives on your phone

The idea is to allow your physical cards to live in your digital world. Here are the main advantages:

  • Works on any device with a display (color or B&W) no need for bluetooth, RFID or other radios.
  • Each ID is independant so your privacy and security isn’t compromised. This isn’t a universal ID, each ID is seperate so your privacy is secure but since it is digital it’s easy to find the one you need
  • Cards can be read optically with existing bar-code scanners.
  • Cards can auto-expire so if someone steals your card they only have a set time to use it. So you don’t have to worry about using it on the internet.
  • Since each time you use it it’s unique it’s very difficult cryptographically to forge a card that’s valid.
  • Since it’s digital and has an internet connection if you loose your phone you could use a secure website to close off access to all your cards at once.
  • Use the ‘i’ to flip the card over and see the CCV code if needed.
  • If your phone does have bluetooth or RFID you could show on-screen prompts to confirm a purchase at a point of sale.
  • Since RFID and bluetooth aren’t the primary mechanism you can’t steal someones credit card wirelessly the way you can with other touch and tap cards.

Disadvantages:

  • Existing stores aren’t setup to read/swipe an optical card and may require updated hardware or software
  • You would need a seperate solution for cash. How do you deal with physical money?
  • Adding new cards to your digital wallet may be complex, idealy new cards could be emailed to you or snapped with a digital camera.
  • What do you do with cards that won’t go digital? Do you still need a wallet or do you just ignore those? State and local goverments are likely to drag their feet on digital liscenses, social security cards, passports and other similar goverment issue ID’s could hold such an idea back.

Posted in Ideas, Prediction, Telephone | 6 Comments »

What not to do, MsgBox edition

Oct 07
11

Bad Message Box Buttons

If you decide to use a message box use the appropriate buttons and use the appropriate text. The text in this dialog is strange enough without the extra language backflips that the developer added.

Another example from the same program:

Bad Message Bad Buttons

Here you’re showing an information box and you have a “Yes” button. It’s just weird. What are you saying yes to? Instead display a progress indicator while data is downloading and add the warning text not to disconnect.

Tags: , , , ,
Posted in Misc. | 2 Comments »

Computational Photography

Oct 07
10

Computational photography is the idea that you can compose an image in a computer, not within the camera.  Traditionally you take a picture and the image is composed on the film at the back of the camera.  Alternativly you use a CCD instead of film.  This captures the moment in time and it’s later displayed and viewed, either on film or on a compuer.  But what if you capture more then the moment?

The movie ‘The Matrix’ was the first to explore aspects of this using multiple cameras. Each camera was set to take an image from a slightly different position and angle. The cameras could be timed to shoot at the same time or at slighly delayed times.  The effect was later composed in a computer to allow the illusion of motion.

What if you took three pictures of a room or a place. In theory you could compute a 3D model of that place. You could then move through that model to find just the right angle. Given enough computer power you could give the director the ability to move a virtual camera anywhere within the shot in real-time. This would be the ultimate instant replay.

How about a simpler example… Today a photographer adjusts the ammount of light the camera lets in and the length of the exposure. Even in digital cameras this can result in over or underexposed pictures. With computational photography you can capture not only the momentary image but the intensity of light across the entire exposure. This would allow you to adjust the lighting of the shot after you had already taken it.

Posted in Ideas, Photos | 1 Comment »

iTip – A Tip Calculator for the iPhone

Oct 07
2

UPDATE: We have a new and improved tip calculator. Get details and download the best iPhone tip calculator available.

Itip - Tip Calculator

Last night I coded up a simple tip-calculator for the iphone using the ‘web sdk.’ It’s very basic and allows you to easily calculate the tip and figure out how to split a bill between multiple people. It was mostly a learning exercise but it turns out to be somewhat useful. Add it to your bookmarks for easy access on the go.

  • The iphone uses a strange meta tag called a viewport to determine if content should be scaled.
  • You need to use the style default-width; and default-height to get the window to fill the screen.
  • If you give text fields special names like ‘zip’ you’ll get a number mode keyboard if you use ‘mobile’ you’ll get a telephone input keyboard. (no longer true)
  • Since the iphone has no text selection model there seems to be no way to move the text input cursor. I wanted to use the ‘telephone pad’ for all numeric input and then auto- place the decimal point into but I couldn’t get Safari to behave.
  • Webkit has some nice effects like rounded rectangles, shadows and more. Too bad it’s not part of all modern web browsers.
  • You can get the Address bar to disappear by placing an onload event on the body:
    onload=”setTimeout(function(){ window.scrollTo(0, 1);}, 1)”
    Note: This only seems to work if the window is large enough to scroll.
  • The EDGE network is slow enough without needing to load external files. Minimizing external calls to import CSS and Javascript and things will load faster, especially for one-page applications like this one.
  • Hope you like it. If you have tips for my tip-calculator leave comments.
UPDATE: We have a new and improved tip calculator. Get additional details and download the best iPhone tip calculator.

Posted in Apple, Design, Development, HTML/CSS, Telephone | 3 Comments »