Archive for July, 2008

Iphone Clipboard Concept for Cut, Copy, Paste

Jul 08
26

One of the current drawback of certain touch devices (Iphone) is it’s lack of copy/paste functionality. The difficultly in creating this functionality on a mobile device is that the interaction technique has to be non-intrucive to the core interface. 

Unlike a desktop application where you can toss commands into a menu the interaction model on a phone has to be more direct and gestural.  The copy/paste model I’m proposing tries to address some of these issues. 

When a user is viewing a core text area:

  1. They can scroll (tap + drag ).
  2. They can move the insertion pointer (tap)
  3. They can use the magnifier loupe to position the insertion pointer (tap+hold)
In my illustration you could activate additional copy/paste gestures:
  1. You can bring up the copy/paste pallet ( tap+tap near the insertion pointer)
  2. Once the panel is open you can mark a selection (tap+dragging) from the insertion point creates a selection. Similarly you could create a selection with two fingers marking both corners..
  3. When in copy/paste mode the keyboard is replaced by your recently cut/copied blocks of text or images.  You can tap a piece of text to insert it into your document 
Note: The tap+tap gesture is sometimes used in application to zoom however it is never used to zoom while editing text or viewing read-only text such as in emails or contact lists. 
Unfortunately at this point it’s not possible for third party application developers to write an extension such as this so it’s a concept sketch only at this point. 
P.S. Did you know we’re now developing and designing mobile apps?  Check out our latest design work for a new fitness startup focused on running. 

Post to Twitter

Gas icon

Jul 08
23

Next time you’re in your car take a closer look at the gas icon on your dashboard. Most modern cars use a subtle graphical arrow next to the gas icon. 

photo

The little arrow shows the side of the car that the gas cap is located. In the picture above the gas cap is on the drivers side. 

Car companies can’t standardize on a side to put the gas cap but at least they’ve managed to agree on what icon to use.

Post to Twitter

Make it easy to navigate

Jul 08
8

A couple months back I heard a good talk by Steven Krug. The talk was entertaining and had a simple core point.

  • Let people know where they are on your site so they don’t get lost.

Lately I’ve noticed a bad trend in web-design that sites make it very difficult to tell where you are:

Examples of poor navigation. Facebook, Flickr, LinkedIn and Twitter

Instead of using some visual indication to tell you what section of the site you’re on these sites choose to do nothing. This makes it difficult to tell where you are on the site.

It’s super easy to bold or highlight the section you’re on. Why aren’t these sites doing this? Perhaps in a ‘page view’ culture they want to confuse you and get you to click all around the site looking for the page you need. Twitter in particular highlights a tab that has nothing to do with the page that you’re on.

Well designed sites tend to have primary and secondary navigation elements and it should always be obvious where on the site you are simply by looking at the navigation area. You can bold the text, use a tab graphic, highlight the text, etc, etc. Make it obvious when you’re on a particular section of the site.

LinkedIn, Facebook and Flickr also use hover menus. In general hover menus can cause all sorts of accessibility problems. They also cause obstruction problems as you move your mouse through the screen you pass through the menu and obscure the area you’re trying to click. Lastly since these hover menus contain secondary navigation elements you can’t tell where you are on the site because typically the hover menu is closed.

There are ways to use hover menus and make your navigation clear. Staples is an example of this. The primary navigation is always obvious and althouh the secondary navigation is a hover menu the currently selected page is expanded and shown within the header area making it easy to move around the site.

Post to Twitter