- We design and build extraordinary applications for companies looking to make the next great idea a reality.
- learn more
Icons are evil; so are menus - unless you do them right
Menus and dropdowns seem like attractive design choices because they conserve screen real estate while providing users access to a potentially large number of commands. But if you resist the easy out of menus and dropdowns, you may find that your applications become far more usable.
Survey the software you use for yourself, both browser- and desktop-based. Think about which applications provide the most invisible, effortless interfaces. I doubt it will be the ones that hide commands in complex menus and dropdown systems.
For some negative examples, let's look at Firefox and its more social cousin, Flock. Each app offers an advanced bookmark management mechanism, but the usability of that mechanism suffers in each due to over-reliance on cryptic menus.
Topics: Confluence, Firefox, Flock, User Experience, user interface, UXD
The courage to redesign
People are still griping about the recent redesigns of Facebook and iGoogle, but I think we should cheer on any company brave enough to disregard user feedback and embrace change.
Lots of big-name, highly successful sites eventually reach a state of paralysis in which they're too scared of alienating their customers to examine their interaction design and information architecture from a fresh perspective.
The cautionary tale of Amazon.com
Look at Amazon: The online retailer adopted DHTML navigation just last year - at least 5 years after most other big sites - because its tab interface had grown so comically large. Nevertheless, huge chunks of the Amazon user experience are still massively broken:
- Once you've started down the checkout process, the site tries to keep you from getting back to your shopping cart to add or remove additional items. If you use your back button to do so, you've got to start the checkout process all over again.
- Wish lists offer perhaps the most confusing, error-prone user interface I've ever had the displeasure to experience.
- Link targets on a wide variety of UI controls are tiny and persnickety enough to elicit involuntary profanity.
Web 2.0 context menus vs. Web 1.0 link lists: Style over usability?
As Ajax spreads new UI conventions to the masses, it's important to apply a critical eye to the usability of those conventions. Several big-name sites have launched extensive redesigns in the last few months, from Twitter and FriendFeed to Flickr and Facebook. Certain trends are solidifying, especially the use of context menus that are hidden until a user mouses over an item, then displayed as a series of icons, text or both.
First up we have
Topics: Facebook, Flickr, FriendFeed, Twitter, Usability, user experience design
Where minimalism fails: The problem with Apple’s less-is-more approach
So I'm watching the big Apple notebook event and getting totally excited about the impressive new graphics capabilities. Finally I'll be able to get decent visuals on World of Warcraft on a Mac laptop. Then we get to the part about the new trackpads and my excitement wanes. Once again, Apple is opting for ultra-minimalist hardware and then using software to compensate (poorly) for that design choice.
Here's Steve Jobs:
We've got a new trackpad for notebooks. It's a gorgeous, large, multitouch glass trackpad for notebooks. It's 39 percent larger tracking area than before, it's multi-touch for gestures, it's glass for silky-smooth travel. And we've optimized the coefficient of friction on the glass, so it's really beautiful. And the entire trackpad is the button. It gives you more area on the trackpad and keeps you from hunting for that button. You can get multi-button support from software. And we've added some new four-finger gestures that are really nice.
Four-finger gestures may be really nice, but I'd opt for two hardware buttons any day. Whether you're playing video games or simply using productivity and development apps, you should be able to summon context menus without having to resort to arcane gestures. Apple's obsession with scaling hardware down to its essence may result in beautiful products, but usability almost always suffers. Need some more examples?
Design Thinking
Hmmm … is design thinking going mainstream? A recent article in the Harvard Business Review and now this from the New York Times:
So pervasive has design thinking become in the last five years that Stanford University has created an elective program it calls d.school — more formally known as the Hasso Plattner Institute of Design — that has proved wildly popular with budding entrepreneurs from all corners of the campus.
It is a time in the spotlight for a process that historically has been relegated to the end of the business planning line.
Those of us involved in design already know that design thinking is one of several tools we use to help our clients stay competitive. Nonetheless, it’s nice to see major publications picking up on not only what design thinking is, but the importance of joining it with business thinking. Read the full article for a review of how this partnership works to create new solutions.
Topics: design thinking
Bullseye Diagram
In most projects, it’s easy to come up with ideas but more difficult to give weight to their importance since the client (and sometimes the team) think they’re all important. So we move onto establishing a scale (1 = must have; 2 = nice to have, etc.) and then assigning values to each task/idea/feature. Generally some good discussions come out of this exercise in determining exactly what is important in creating a successful project, along with defining exactly what “success” is.
At the IDEA 2008 preconference workshop, Dave Bishop and Paul Gould from MAYA showed us another way to prioritize project tasks: a bullseye diagram. It’s still a ranking system, but done visually rather than numerically. The team first lists out all the project tasks. These are then placed in the bullseye based on where they fall in rank; the critical items are in the center and the less important items moving towards the outer rings. If this is done on a whiteboard with the tasks on Post-it-Notes, then information can be quickly be moved around in relation to new tasks that are added to the bullseye.
Once the tasks are prioritized and in the bullseye, you can organize, arrange and add structure. You can start to see relationships, which may indicate a different priority. You can start to see categories, which may affect iteration planning. You can begin to add structure. The outcome of this exercise is an easily understood diagram showing the project’s priorities. For teams that aren’t comfortable assigning a number to a task, this is a good alternative to try.
IDEA - preconference workshop 06 Oct 08
The IDEA conference is being held in Chicago this year, and once again MAYA Design hosted the preconference workshop on Information Architecture. Some thoughts from the morning’s discussions.
- Why diagram? We diagram in order to depict the information space in such a manner that allows us to visually validate to the client that we understand their domain. So often as consultants, we’re thrown in to domains where we have no or very little prior knowledge and minimal time to come up to speed at the level we need to be at in order to understand the context of the problem. Diagrams are one artifact that we use to organize the information space and document the users’ mental model. They are an essential element in verifying that your direction and understanding are correct.
- Future proofing. Don’t just design for the here and now; don’t design a solution that locks you into one way of thinking; don’t create a solution that can easily be broken by another idea. As solution designers, we need to look at the larger picture and how the various pieces can fit into the whole, rather than at just one feature or one path. We need to allow for evolution so the solution can accommodate growth and expansion without extensive redesign. All of these are concepts we’ve heard before; but it's already good to get the reminder and hear them again.
- UCD - user centered design focuses specifically on making systems usable to people. It tames complexity. Having the user integrated into the design process brings a focus around which you can organize the solution and design a usable interface. The direct benefits are increased productivity, reduction in support costs, improved user satisfaction, etc. The usual suspects, but nonetheless important to bring up with your clients when you remind them why UCD is relevant.
For the remainder of the session, MAYA reviewed some diagrams they use in their IA practice, including some I hadn't seen before. I’ll have more on that later.
What does your CSS Swiss Army knife look like?
CSS 2.1 is more like a Swiss Army knife than a fully stocked toolbox. We can accomplish a lot, but we have to get creative with the standard attachments. Floats, relative positioning, the box model - each tool must performs double or triple duty because they're the only ones we've got.
When we do discover a clever way to accomplish a common task using these limited tools, we're likely to employ that technique over and over. I'm not talking about CSS frameworks here; those help out more at the macro level. I'm talking about repeatable techniques that can be applied at the micro level. When done right, these simple techniques can feel like entirely new Swiss Army attachments rather than intelligent application of existing blades.
Whenever I start out on a new client project, I start off with the following plug-and-play components:
Topics: CSS, Javascript, Progressive Enhancement, Web Standards
Getting things done with Flock and Meebo
During a recent GTD weekly review, I suddenly realized how many distractions had worked their way into my daily office routine: personal email, personal instant messaging, entertainment feeds, Facebook. I suspect such time-wasters pose a bigger danger to web developers than to other professionals, if only because the programs they run in are so central to our work. I run Firefox for web development, Adium for instant messaging, and NetNewsWire for industry news all day out of necessity. If I allow my personal distractions to jump out at me from those programs, my productivity plummets.
This weekend, I worked hard to de-tangle my professional and personal lives. My tools? Flock, the Mozilla-based "social browser," and Meebo, the browser-based IM aggregation service. My goal was to separate all personal bookmarks and RSS feeds from NetNewsWire and Firefox into Flock, then move all my personal IM accounts from Adium to Meebo. The end result was a self-imposed firewall between productive time and fun time. (Thanks to many a Lifehacker article for the basic idea, if not the implementation.)
Topics: Adium, Facebook, Firefox, Flock, getting things done, GTD, Meebo, NetNewsWire, productivity, work life balance
Four blatant iPhone usability blunders (and one constant annoyance)
I've been an iPhone 3G owner for about six weeks now - six weeks of love, loathing, cool apps and connectivity problems. Rather than complain about poor network coverage, though, I'd like to delve into some of the vexing usability problems that hamper the phone's user experience.
No ability to disable autocorrect completely
Like pretty much every autocorrect feature ever built, the iPhone's does more harm than good. It always thinks it knows best. If you don't watch it like a hawk, it will render everything you type completely nonsensical. Proper nouns, abbreviations, profanity - all get turned into gibberish by this well-meaning but deeply flawed function. And god forbid you try to use the classic email e.e. cummings mode in which uppercase letters don't exist. The iPhone literally will not let you output the word "iPhone" without throwing in that capital "P." It's maddening.
If the purpose of autocorrect is to allow you to type quickly without having to monitor your output, it fails miserably. On the iPhone, if you want what you type to show up verbatim on the screen, you have to pause at the end of each word to ensure that the OS is not about to substitute its own wisdom for your actual intent. I would honestly rather type on a 1999-era StarTAC numeric keypad.
None of this would be as galling if there were a setting to turn this feature off. But there isn't. Elaborate, unwieldy workarounds have been suggested - all because Apple users know that the folks in Cupertino often paternalistically ignore their users. Microsoft's OS and apps may suck, but you can usually customize the hell out of them. Not so Apple's.
Topics: iPhone, Mobile, Safari, Usability, user experience design
A New Workflow for Web Designers
It was Tim Berners Lee's original vision of the web that online documents be both readable and writable. He notes in his book "Weaving the Web" that that he was disappointed with the way the browser was initially developed as a read only technology, making it expensive and onerous for the asses to publish online content, and essentially creating a top down system, with lots and lots of readers but few writers.
Only recently has the technology that allows anyone to easily publish and edit online documents, in the form of Wiki's and Blogs, been developed. These tools have become so popular, so ubiquitous precisely because they cater to what users really want, fulfilling the potential that the web's founding father had envisioned for it almost 20 years ago.
Continue reading »
Topics: CMS, Web Design, workflow
Download my album for money?
As a happy transient fom the world of record stores to downloading my tunes happily from emusic, Loronix, moistworks and other fee based or file sharing sites, I am interested in how the music world is balancing art with commerce. With iTtunes being my least favorite way to get music, yet for convenience, it has surpassed 5 billion downloads, the pricing structure still seems broken. Radiohead made everyones news with releasing their record as a "how much would you like to pay" model. My problem with this was how difficult, confusing and somewhat rinky-dink the download/pay experience was handled. It actually made me not want to pay. Now comes the same idea done right - the 'mashup' artist Girl Talk, who put out one of my favorite records last year, has a pay what you like model done right.
The first page offers a clear value proposition, name your price - but if you pay 5 bucks you can get lossless versions. Pay 10 and get a 'real' cd whenever they create it. Then process the transaction using paypal, so no messy credit card transactions. Download at the same time so paying is not tied to actually getting the files (you can still bail on paying) However, being a fan I settled on $2.50, a tip so to speak. How about you, does the straightforwardness and ease of use make you want to pay at least something? Or to be profound - does ease of use translate into profits? I'm banking on yes, since the site was being hit so hard that it won't even load the cover picture, and it is my profession as well. I would love to see statistics on how this works out for Greg, but being a 'pirate' music site, we may never know what the ratio of payers to moochers is, which is a shame.
Topics: Add new tag, UXD
Fresh paint or new drywall? The cost of changing IA or design mid-project
We software engineers - and our clients - tend to think of visual design as a coat of paint. The arrangement of elements on a screen seems like a purely decorative concern, something that can be applied to the bare walls of an otherwise functional application at the very end of the development process. Anybody who's ever spent much time coding at the view layer knows differently. If effective visual design planning doesn't occur early in a project, there's often a hidden cost. Reskinning an application is more like installing new drywall than applying fresh paint.
The PR wizards who launched the web standards movement have propagated the idea that if you just mark up your content and code semantically, then it's a trivial concern to alter its appearance. This is true up to a point, but most sites have a large number of person-hours invested in their stylesheets, images and other purely "decorative" assets. Because browser vendors haven't consistently implemented existing web standards, even the most well-meaning programmers must litter their code with hacks, filters and nested containers to achieve visual fidelity. The hooks for achieving a given look-and-feel often penetrate deep into the view-layer code. Altering that look-and-feel often requires changes to those hooks, which adds risk to a project and almost always breaks lots of tests.
The Blogs Have Moved
After laboring away on Typepad because it was easy and, frankly, we had more important things to do, we have finally made the move to our own in-house blog. It now sits under the web site at http://www.pathf.com/blogs/ and combines our various blogs -- Agile Ajax, UXD, Business Rules and Techdev. You can still access all of the sub-blogs individually through their feeds and category pages.
If you run into any issues (which I'm sure you will, given the contortions we had to go through to deal with Typepad's funky url's), drop us a line at info@pathf.com.
Topics: Announcement
All the news that was fit to print
The New York Times has unveiled an archival service called Times Machine which archives the past 100 years of the newspaper of record. Along with the benefit of seeing ads for trusses, we see a very sophisticated and robust interface using HTML + CSS + Javascript of a very easy way to scan large amounts of printed text. There have been so many of these kind of apps, almost always using Flash with proprietary back end processing, it's refreshing to see these sorts of interfaces with the code all public and easy to steal learn from.
In this case, the clever interaction design (and a hurdle for HTML) is to pair the actual article image (spanning multiple columns) with the text summary. The implementation makes scanning the paper a breeze and has a great visual clue of highlighting the image and overlaying the summary text. I'm delving into the markup to see how they managed to dynamically pair the images with the representative text, and seeing what other magic is under the hood.
Another nice feature was the rotating 'share' button, which takes care of not prominently promoting digg or reddit, but subtly reminding users that if they like to vote, here's where to do it. The only bad feature is that this is for paying customers only, but NYT has made free its online articles, hopefully in time this will follow suit, the days of microfilm readers may be numbered.
Topics: User Experience
About Pathfinder
Recent
- Firefox Plugin Malware ‘Trojan.PWS.ChromeInject.A’
- Pathfinder releases version 1 of the its Flash Platform microsite (codename Mica)
- Pimp my Rails: Five Plugins & Gems to Make Rails Better
- iPhone: Using Pre-processor Directives for Device Testing
- Subtle OpenGL Projection Matrix Difference Between iPhone Simulator and Device
- App Security: Throw Out the Org Chart!
- Pimp my jQuery: Five plugins to replace the features Prototype and Scriptaculous users expect
- Thanksgiving 2008: What We’re Thankful For (In Rails)
- iPhone SDK: Testing with TextMate & GTM
- GWTQuery - JQuery-like Syntax in GWT
Archives
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
Topics
.NET
2d physics
3d
3D GPS
3D physics
37signals
Accessibility
actionscript
activerecord
acts_as_ferret
Add new tag
Adium
ADO.NET Entity Framework
Adobe
Adobe AIR
Advertising
agile
Agile Development
AIR
Ajax
Ajax Applications
Ajax Bookmarking
Ajax Components
Ajax Development
Ajax Examples
Ajax Experience
Ajax Frameworks
Ajax history management
Ajax Intervention
Ajax libraries
AJAX Obfuscation
Ajax Performance
Ajax Products
Ajax Tools
Ajax Widgets
Amazon
Amazon CDN
Amazon Web Services
amf
Analysis
Android
Announcement
Announcements
antennae
Apollo
apple
Application Architecture
Application Development
architecture
AS3
ASP.NET
Asynchronous Processing
authorization
awards
Azure
Back Button
bandwidth
bandwidth profiling
Benchmarking
Best Practices
BitmapData.draw
BJAX
Blaze Advisor
blog
blogging
Books
Browsers
Business
Business Reasons for Ajax
Business Rules
C#
caching
Canvas
Case Studies
Charles
chess
Chesspresso
Chicago
Cloud Computing
CloudFront
CMS
COBOL
code
code art
Code Generation
Color
COMET
Conference
Confluence
Consistency
Content Management
CRM
CruiseControl
CSS
Custom Flex Component
data visualization
Degrafa
Design
Design Patterns
design thinking
Desktop
Desktop RIA
Developer's Notebook
DHTML
Diagnose
Dojo
Domain Knowledge
Drools
EC2
Echo2
Echo3
Editorial
ERP
Ethnographic Research
events
externalinterface
Ext JS
Facebook
ferret
FileReference
Firefox
Firefox Extensions
fixtures
Flash
flash awards
Flash Platform
flash player
flash player 10
Flex
flex css
flex skins
flexunit
Flickr
Flock
Flow
Frameworks
FriendFeed
front end
front end development
fulltext search
Games
Gauge Component
getting things done
Git
Google
Google calendar
Google Gadgets
Google Gears
g phone
Grails
Graphics
Greasemonkey
Groovy
GStreamer
GTD
Gwittir
GWT
hardware
Healthcare
Hibernate
HTML
Hudson
IDE
Ideation
IE
IE6
IE7
IE8
iGoogle
illustrator cs3
ILOG JRules
importing graphics to flex
Information Architecture
Innovation
Instructional Design
Interaction Design
interaction patterns design
Interview
iPhone
iPod
iTunes
Java
Javascript
JavaScript frameworks
Javascript Libraries
JBoss Rules
Jess
Jetty
JIT
Jobs
jQuery
JSF
JSON
JSP
JSR-94
JsUnit
laptop
Lazlo
Legacy Systems
lightweight
LinkedIn
LINQ
logging
Logical Model and Conceptual Model
Low Pro
Mac
Malware
Mash Note
Mashups
Meebo
MetaWidget
Methodology
Microformats
microsite
Microsoft
minimalism
Mobile
modeling
Mootools
mouse
mouse scroll
mouse wheel
Mozilla
Music
MVC
MySql
NetNewsWire
notebook
obj-c
Object-Oriented
Object Relation Mapping (ORM)
Office
OOP
Open Screen
OpenSocial
Open Source
Opera
Oracle
ORM
osx
pagination
Pair Programming
papervision3d
Patterns
Peer Creation
Performance
Personas
PGN
PHP
physics
physics engines
plugin
preloader
process
Web/Tech
Product Definition
productivity
Progressive Enhancement
project management
Project Website
Prototype
Prototyping
PV3D
QA
qooxdoo
Radiant CMS
rails
Really Simple History
References
Requirements
Requirements
Alice Toth
Requirements Visualization
resesign
Restlet
RETE
Review
ria
Rich Interactions
ruby
rubyamf
Ruby on Rails
Ruby on Rails testing role
S3
SaaS
Safari
San Francisco
Scalability
Scenarios
Scriptaculous
SDLC
Search
Security
Selenium
Semantic web
SEO
Server Side
Silverlight
skins
SOA
Social Networking
Software Processes
Songbird
SpiderMonkey
Sprajax
Spreadsheets
StageScaleMode
Standards
Startups
STI
Story Telling
Struts
Tamarin
Task Flows
Test Driven Development
Testing
textmate
The Ajax Experience
throttling
Tilt Component
Tools
TraceMonkey
Training
Trends
Tumblr
Tutorial
Tutorials
Twitter
UI
UIViewController
unit testing
Unit Tests
Usability
Usability Testing
User Experience
user experience design
user interface
User Interface Standards
User Research
UXD
Venture Capital
Video
Vision
Visualization
VLC
Volta
Web/Tech
Web 2.0
Web Design
Web Development
Webkit
Weblogs
Web Services
Web Standards
Widgets
will_paginate
Windows
Wireframes
WordPress
workflow
work life balance
xcode
XML
XML Metadata
XUL
Yahoo Map AS3 API
YUI
Zeigarnik
Zeigarnik Effect
ZK