Blog

Because a mind is a terrible thing to waste?

MoFuse: Hosted Mobile Website Service

MoFuse is a service that allows site owners to provide a .mobi experience for their existing sites. The service allows you simply plug an RSS feed url into your account settings for a new site, and delivers a mobile formatted version of that feed. They also provide the ability to publish as an iPhone app, using the IUI interface, which you can experience on Google and FaceBook mobile sites. The service also allows you to create static pages, and customize the colors of the UI.

The demo below shows the Konigi feed implemented as a mofuse site. I haven't gotten around to doing feeds that provide screenshots, so you'll see only text for content.

konigi Mobile - iPhone Preview on MoFuse

The free service allows publishing under the mofuse .mobi domain, e.g. our Konigi demo is at konigi.mofuse.mobi, and includes analytics tools. You can also monetize your site using AdMob or Google Adsense—you'll do a 50% revenue share with MoFuse. For $6 USD, you can upgrade your account to use your own domain, provide a header logo, and get 100% of your ad revenue.

The functionality you provide is fairly limited, but this can be a nice simple implementation of the IUI experience for sites that don't want to invest the time in creating a mobile format for their sites.

http://www.mofuse.com/

Samsung TouchWiz & F480 (Phone Scoop)

PhoneScoop provides a demonstration and photos of the new Samsung TouchWiz finger touch user interface, a 2.0 version of the company’s Croix OS.

This one of the first phones to rush to market in order to compete with the iPhone. There doesn’t appear to be a multi-touch-type interface for two-finger interactions like zooming, but dragging and dropping appears very similar to the iPhone’s drag behavior. One of the fun features is a very configurable home page, which provides user-selectable widgets. Very cute.

Viewing Search Results in the Chart View of Morae

TechSmith has published a useful tutorial that shows how to view where people clicked during sessions.

Morae recordings use TechSmith’s Rich Recording Technology (RRT) to capture video, audio, camera input, as well as all sorts of data, including keyboard entry, screen text, web page changes, mouse clicks, and system events. Use Manager’s Search Results pane to help you focus in on this valuable information to support your findings.

This feature is pretty hidden, so Morae users will want to check this out.

10 Mistakes in Icon Design

Denis Kortunov provides a nice illustrated list of common mistakes in icon design.

  1. Insufficient differentiation between icons
  2. Too many elements in one icon
  3. Unnecessary elements
  4. Lack of unity of style within a set of icons
  5. Unnecessary perspective and shadows in small icons
  6. Overly original metaphors
  7. National or social characteristics not being taken into account
  8. Images of real interface elements in icons
  9. Text inside icons
  10. Outside the pixel framework

http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/

Video Demonstration of Interfaces

I've started experimenting with doing video screencasts in the interface section. You can see an example of the first one here: Gawker Media Video Comments. Scroll to the bottom of the screenshots for video--which we're going to use Vimeo's excellent video publishing service for the hosting. Here's a preview of the first video:

I think it makes a lot of sense to do this for interfaces because screenshots simply cannot reproduce the experience of transitions, motion, and AJAX interactions. Let me know what you think.

-Michael

Apple TV 2.0 Review

Apple TV owners got a software update pushed to their boxes this week, and Gizmodo has a review of the software complete with screenshots and a description of the rental and purchase services now offered.

I was a bit disappointed by the update at first, but like my 6 year old son said on the second day, "I'm getting used to it." Gone is the simple, single panel with left/right hierarchical navigation. That has been replaced by a 2 panel columnar navigation--left side for parent and right for it's children. Once you select the child in the right panel, that screen is taken over by a full screen interface, e.g. Movies > My Movies > Full screen movie list. Once you adjust to that change, the interface is quite intuitive actually, but I would have preferred the option to use the older UI if I prefer.

The UI for navigating your media is much simpler than that for navigating available video rentals. They've taken to using the full screen to navigate movie rentals by the movie's poster image (with titles is smaller type) which is neat at first, but less eficient than quickly scrolling a list of titles. It might be simpler for young children, being able browse through images rather than skim titles, but it would have been nice to have the option of switching between the two.

Many of the technical issues in the first release have been dealt with as well. Synced and streamable media are now seamlessly navigable--you don't have to switch between sources. I also perceived there to be less buffering time when streaming video. They've also added access to Flickr photos.

On the service end, I, like many others, think the terms of service for video no demand are not so great. The prices are on par with DVD rental, but you have to watch the video within 30 days, and once you start, you only get to watch the video for 24 hours. This might make sense to most people, but not to parents with kids who rent a video and watch it repeatedly for a while before sending it back, e.g. to Netflix. It will be interesting to see if they're ever able to come up with a subscription model more like Netflix. That would certainly get a lot more interest in my opinion.

Overall, I think the user experience and convenience offered for people who have an interest in the Apple TV is a great improvement in this release. Check out more of the interface on the article at Engadget or the Apple TV Guided tour video below:

Or in Cali Lewis' review on GeekBrief.tv

View screenshot on Flickr

Yahoo! NewsGlobe vs. Wii News Channel

Yahoo! launched the News Globe, which shows the top news stories of the day using a rotatable globe for navigation. The stories are depicted as red blocks stacked over geographic regions of the globe, with taller stacks indicating more stories. By default the interface will autoplay through the top stories, spinning the globe to get from story to story. Clicking a link to a news article jetisons you out of this otherworldly view of earth, and into text land on a separate page. It's a jarring experience.

This attempt at providing a way to visualize top published news activity is cute, but it's nowhere near as useful as the interface provided by the Wii. Check out the interaction with the Wii News Channel below:

There is something much more gratifying in the Wii News Channel experience, and I think the satisfaction I feel is due mostly to the fun of using the Wii remote to spin and navigate the globe. I have get a giddy feeling doing the same thing while I spin the globe in the Wii Weather Channel. But the other thing that makes the Wii experience much more useful is that the news stories are previewed seamlessly while the globe visualization persists. I never thought that reading the news on the TV would be a pleasurable experience, but the zoom and pan features for text is as interesting in the Wii as is the zoom feature on the iPhone.

Seems to me that the Yahoo! News Globe is an attempt to mimick the experience of news on the Wii, but it comes across feeling gimmicky and not very useful. The Wii News Channel makes reading news on a TV fluid. For reading news on a computer, I'll stick with organized lists of text, thanks.

View screenshot on Flickr

Rosenfeld Media - Mental Models

Rosenfeld Media publishes it’s first UX book, Mental Models by Indi Young. Congrats to Lou and Indi!

After two long years, Rosenfeld Media is a real, bona fide publisher. More importantly, as a loyal Bloug reader, you can purchase our first book, Mental Models: Aligning design strategy with human behavior, by Indi Young, with a 10% discount from the Rosenfeld Media site (use code BLOUG01MM). You’ll receive Indi’s excellent book, illustrated and beautifully printed in full color on high quality paper with a sewn binding.

But that’s not all! You’ll also receive a digital version, optimized for on-screen use. Now a searchable and readable version will go where your laptop goes.

Apple filing depicts Apple TV with iChat widget interface

AppleInsider discovers an August 2006 patent filing by Apple for features having to do with broadcast video sent over Apple TV. The patent discusses interesting ideas for widgets that overlay the screen to allow such display of information as data related to what is on, and interactions such as purchasing tickets to performances, and doing video chat.

View photo on Flickr

http://www.appleinsider.com/articles/08/02/07/apple_filing_depicts_apple_tv_with_ichat_widget_interface.html

Apple's Safari 3.1 to support downloadable web fonts and more

Apple Insider reports that Apple will ship Safari 3.1 with downloadable web fonts, HTML5’s SQL storage application programming interface, and HTML5 video and audio tags. They provide the following description of these new features.

For example, CSS Transforms and CSS Animations will join web downloadable fonts in allowing Safari 3.1 and iPhone users to render web pages and web apps with enhanced design messages and real-time visual effects. By applying Transforms, developers can author trigger actions that scale, rotate, skew and translate HTML boxes in real time. Similarly, Animations offer a quicker route to AJAX-like effects, such as fading out an HTML element, or increasing the border of a box when hovered over.

HTML5’s SQL storage application programming interface (API), which is a client-side database storage programming interface that will allow a future array of web applications to store structured data locally on a user’s machine using SQL.

Also on tap for the new version of the Apple browser is support for video and audio tags as outlined in the draft specification of HTML5, which add native support for embedding video and audio content in web pages.

iPhone versus tPhone

Edward Tufte posted an essay and video with commentary about the iPhone. Tufte is complimentary, for the most part, about the interface being predominantly free of administrative debris, but makes suggestions for how the iPhone can make better use of its screen resolution. As expected, his argument calls for more data density when possible.

He notes that the iPhone has elegantly removed administrative clutter in many places, using the information as the interface. In reference to the iPhone's design of the weather widget, he says the following.

To clarify, add detail. Clutter and overload are not an attribute of information, they are failures of design. If the information is in chaos, don't start throwing out information. Instead fix the design. And that is exactly what the iPhone has done.

He makes the argument that the "chartoony" appearance of the stock market widget does this very thing—removes information that could be useful, given the resolution of the screen and the zoomable UI. His position on showing more data prompted some debate about the efficiency of more versus less in this specific context. There are many great responses by commenters that justify the clarity of the large type and the choice of only essential information in the iPhone, including the great retort by Chris Fahey.

You are neglecting the fact that iPhones are *mobile phones*, designed to be used primarily by people on the go, or by people who are otherwise occupied. The cartoony UI screens are designed to be usable by people who are walking, talking, riding on a train or bus, waiting in line, bored in meetings, and (unfortunately!) while driving.

Typical iPhone usage lends itself well to the information-thin designs you criticize precisely because it does not attempt to do more than deliver the most important information in a heartbeat. The “image resolution” style of information design you advocate is great for someone using an iPhone while sitting in a comfy chair with lots of time on their hands, or for someone who posesses no other information platform (i.e., no desktop or laptop computer). But for most users, they will use the iPhone to informally keep their finger on the pulse, and use their main computer to actually think about and analyze data.

Fahey's points touch exactly on the thing that Tufte is missing in his solution—discussion of iPhone users and the context in which they use these interfaces. You might find more data on a PDA or any other smartphone out there, but if you test those other data dense interfaces in real world scenarios against the iPhone, I would bet that the iPhone comes out on top in terms of efficiency and usability.

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00036T&topic_id=1

Engineer Unlocks Wii's Hidden Potential

CNET reports on Johnny Chung Lee’s interaction experiments with the Wii Remote. Lee, a Phd student at Carnegie Melon, does a quick demo of head tracking for VR displays and multi point interaction using the wii remote. His experiments describe with incredible clarity how the wii remote fundamentally works and how the remote might be exploited to do much more than point at single points on the screen and control them. He then proceeds to show us two things demonstrated in the videos below. Brilliant stuff.

How the remote can be used to visualize virtual reality displays by pointing the remote at a user with IR leds placed on their head.

How to get multi-touch interaction by using the remote’s camera coupled with an led array, and reflective tape attached to his fingers as sensors.

Overcoming Blank Canvas Phobia

Cameron Moll discusses the issue of staring at a blank canvas in Photoshop, and his approach to overcoming “blankcanvasphobia” and leaping into the design process.

  1. Familiarize yourself with how others have solved the same problem you’re solving.
  2. Draw from previous work.
  3. Sketch it out
  4. Begin with a grid
  5. Begin in grayscale
  6. Start with the “core.”
  7. If nothing sticks, come back later

Paper Prototyping with Morae

Userfocus provides some inspiration for capturing paper prototype tests with Morae and a webcam. Their method invovlves positioning the camera over the prototype, connect the cam directly to the PC, viewing the camera live in a video editor, and recording the output of the editor in Morae.

This method is ingenious. It gives you all of the agility of doing a paper prototype, with the flexbility and control of using Morae for the observation, note taking, and highlight reel creation.

http://www.userfocus.co.uk/articles/morae-pp.html

Killing Bad Layout Conventions

Andy Rutledge exposes the flaws of an established design conventions—the 3 column layout. The layout is typically identified by a wide center column with 2 flanking narrow sidebar, and it can be found on some of the largest and most popular sites, including Amazon.com and Apple.com. Rutledge points out the limitations and inefficiencies of this layout:

  • Symmetry is usually detrimental to content hierarchy
  • Symmetry diminishes viewer interest
  • Having 2 sidebars, one on either side, defeats the purpose of sidebar content
  • It requires that site visitors first learn (and perhaps relearn from page to page) where to look for a particular sort of ancillary information or links
  • Often results in far too much ancillary information on the page
  • The particular sort of visual noise generated by the 2 bracketing sidebars diminishes, rather than enhances, user/reader focus on the main content

Rutledge challenges designers to really think about their given problems and design for them; to challenge what has become conventional. The point is clear for any project. Context helps to give shape to solutions. Solutions should emerge by directly addressing the context of the problem, the nature of information use relative to the problem, and the information seeking behaviors of users relative to that problem. If contexts such as these are the focus of design discussions, rather than finding conventions or technologies to implement as a solution, we will be less likely to churn out cookie cutter projects, but will serve user needs more effectively.

http://www.andyrutledge.com/bad-layout-conventions.php

Crowdsourcing The Library of Congress

The Library of Congress has maded 2 of its collections of historical photographs available on Flickr. The goal is to get users to tag and comment on the photos, as well as help provide identifying information.

It's very interesting to see such a large and old institution embracing open social collaboration like this. When I was in school, the idea of user supplied freetagging was pretty seen as an edge-case activity even for things like private databases. This openness and the use of a site as simple flickr for the task of implies that crowdsourcing on the web is really beginning to become an accepted mainstream activity. Exciting stuff. I applaud the willingness of the LOC to experiment with social software.

More info is available at the Library of Congress website.

http://www.loc.gov/rr/print/flickr_pilot.html

Innovate or Die Winner, The Aquaduct

The winners of Specialized's Innovate or Die Pedal-Powered Machine competition have been selected. The Aquaduct Mobile Filtration Vehicle was invented by five students from California: Adam Mac, Brian Mason, John Lai, Paul Silberschatz, and Eleanor Morgan.

The Aquaduct transports, filters, and stores water for the developing world. A peristaltic pump attached to the pedal crank draws water from a large tank, through a carbon filter, to a smaller clean tank. The clean tank is removable and closed for contamination-free home storage and use. A clutch engages and disengages the drive belt from the pedal crank, enabling the rider to filter the water while traveling or while stationary.

This movie gave me the chills, thinking about how design can be used to improve living conditions, and in this case, truly revolutionize how peoples basic needs are met. Simply brilliant and inspiring.

http://www.innovate-or-die.com/

Shneiderman's Eight Golden Rules of Interface Design

Ben Shneiderman's Eight Golden Rules of Interface Design are user interface design rules described in Designing the User Interface: Strategies for Effective Human-Computer Interaction. Shneiderman proposed this collection of principles that are derived heuristically from experience and applicable in most interactive systems after being properly refined, extended, and interpreted.

To improve the usability of an application it is important to have a well designed interface and these "Eight Golden Rules of Interface Design" are claimed to be a guide to good interaction design.

Strive for consistency
Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout.
Enable frequent users to use shortcuts
As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user.
Offer informative feedback
For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
Design dialog to yield closure
Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.
Offer simple error handling
As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error.
Permit easy reversal of actions
This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.
Support internal locus of control
Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders.
Reduce short-term memory load
The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

Wikipedia contributors, "Shneiderman's rules for design," Wikipedia, The Free Encyclopedia, http://en.wikipedia.org/w/index.php?title=Plagiarism&oldid=5139350 (accessed January 17, 2008).

http://www.amazon.com/gp/product/0321197860?ie=UTF8&tag=urlgreyhot-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0321197860

Design Pattern Libraries and UI Guidelines

If you’re looking for conventional, reliable, and tested user interface patterns for common interface problems, look no further.

Pattern Libraries

  1. Welie Interaction Design Pattern Library
  2. Yahoo! Design Pattern Library
  3. UI Patterns
  4. Peter Morville’s Search Patterns Collection on Flickr
  5. The Design Of Sites Book
  6. See also: Tom Erickson’s Interaction Design Patterns page which provides a listing of further design pattern resources.

User Interface Guidelines

  1. Apple Human Interface Guidelines
  2. Usability.gov Research-Based Web Design and Usability Guidelines
  3. Windows Vista UX Guidelines

23 Actionable Lessons from Eye-Tracking Studies

Christina Laun summarizes the top lessons to take away from eyetracking studies.

  1. Text attracts attention before graphics.
  2. Initial eye movement focuses on the upper left corner of the page.
  3. Users initially look at the top left and upper portion of the page before moving down and to the right.
  4. Readers ignore banners.
  5. Fancy formatting and fonts are ignored.
  6. Show numbers as numerals.
  7. Type size influences viewing behavior.
  8. Users only look at a sub headline if it interests them.
  9. People generally scan lower portions of the page.
  10. Shorter paragraphs perform better than long ones.
  11. One-column formats perform better in eye-fixation than multi-column formats.
  12. Ads in the top and left portions of a page will receive the most eye fixation.
  13. Ads placed next to the best content are seen more often.
  14. Text ads were viewed mostly intently of all types tested.
  15. Bigger images get more attention.
  16. Clean, clear faces in images attract more eye fixation.
  17. Headings draw the eye.
  18. Users spend a lot of time looking at buttons and menus.
  19. Lists hold reader attention longer.
  20. Large blocks of text are avoided.
  21. Formatting can draw attention.
  22. White space is good.
  23. Navigation tools work better when placed at the top of the page.

Read the full article on the Virtual Hosting Blog, where you'll find descriptions of each of these points.

How Direct Marketing and User Experience Are the Same

Usability blogger, John S. Rhodes writes in Apogee that Direct Marketing and UX are the same, or at least share common goals and methodologies. This quote sums up these parallel ways of thinking and working:

There is a serious emphasis on testing and measurement. Metrics are the law. Success is based on tangible results: number of phone calls, number of and type of brochures requested, number of email address captured, number of comments made, number of web page views and so on.

In this way, usability and UX share commonality with direct marketing. We've known for years that we cannot take action on behalf of users without first having data. Educated opinions are useful, e.g., heuristic analysis, but nothing is as powerful and useful as data from research in the lab or the wild.

I would wholeheartedly agree that we could share lessons learned between these 2 fields. In the past year I stumbled on and have taken an interest in direct marketing, mostly due to finding Dan Kennedy serendipitously and reading a book of his. I held the same belief when reading a Kennedy book--we're interested in the same things, with different needs or problems in mind. I'll be keeping an eye out for more on this theme and am sure to blog what I find here.

A Notebook...

This is a notebook where things are copied, pasted, or dashed off. It's a place to stuff notes, drawings, and grabbed screenshots. Consider it an inbox, unfiled.

Visit gifmuse
gifmuse.io
Say Hello

Sign my guestbook and share a random, weird or inspirational message or whatever is on your mind.


Blogroll