UXD: User Experience Design

Where minimalism fails: The problem with Apple’s less-is-more approach

MacBook

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?

Continue reading »

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:

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.

Bullseye DiagramAt 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

IDEA conference logoThe 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?

Swiss Army knife

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:

Continue reading »

Getting things done with Flock and Meebo

Screenshot of 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.)

Continue reading »

Four blatant iPhone usability blunders (and one constant annoyance)

photo of a broken iPhone

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.

Continue reading »

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: , ,

Download my album for money?

Couldn't be simpler

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: ,

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.

Continue reading »

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:

All the news that was fit to print

TimesmachineThe 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:

Top 5 Iphone styled websites

ReaderIn the oxymoron that was mobile web design for many years we struggled to try our HTML pages out on different mobile devices only to have to resort to stripping out anything resembling good design or usabilty. On my trusty RAZR phone, I was content with using java apps to display things in a meaningful way, but having to learn the arcane hotkeys for each app became a chore, and they went little used. With the iphone, the promise was that regular sites look like their BS (big screen) brethren, where users can not have to learn new interaction conventions for their favorite sites outside of zooming and moving around to fit the screen. However, there is a second wave of web apps that optimize their site for the iphone. Using conventional xhtml, css, and some javascript, with a few unordered lists you can distill most complex sites into something new, and in many cases are easier, faster, and better user experiences than the 'real' sites! I hope this gives notice to web designers to pare down things that users rarely need and keep things simple. You may have your favorites, please add them to the comments, and non-iphoners can usen this emulator to try out the alternate sites:

5. iPhlickr - http://www.chandlerkent.com/iphlickr/
What sets this apart is a seeming blur between the iphone features and the browsing world, when you select a photo, you can then share it, send it, or view it within the flickr world, unfortunately when iphone apps become available next month, flickr will probably become an 'app', but until then, this is a very ingenious and useful approximation.

4. Wikipedia

Iphones aren't fast in downloading data (yet) so when I want some info, I don't want a huge load time with lots of info that isn't getting me to my goal, this interface is very fast, and also does a great job in reformatting wikipedia content to take advantage of show/hide heading behaviors, which is a new iphone 'standard', and one that helps parse long documents quickly.

3. Amazon

A old-time favorite (was iphonized pretty much right away), but Amazon should be applauded by honing down their value propositions to fit on this screen, that is product, price, ratings. Thats it, and thats what In need when I'm thinking about picking up that camera in Circuit City, i want to swoop in and Amazon it for comparison and this does the job.

2. Reqall - www.reqall.com

I mentioned how much I liked this the other day, a technologically amazing mashup of voice/text note taking, plus some nice keyword recognition make a pretty darn useful to-do list! Add on the iphone interface, with good integration of thick finger style tabs, gets a reasonable amount of navigation in a small place to seal the deal. Bummer is that it makes you login every time, but I am lobbying for that to be fixed ;-)

1. Google reader - www.google.com/reader/i

I could say the google iphone interface, but the reason for this post is a huge shout out to Google for their revamping of the RSS interface for the iphone. I am super picky about RSS readers, my copy of NewsFire broke the other day in an update and I was in a panic to find a replacement, to no avail (I fixed it by installing a previous version). The thing I dislike most about other RSS readers is using the metaphor of email. I think we all get too much email, and RSS is not email, its more like a very personalized newspaper. The google reader nails this, and has kept me busy on train trips really enjoying reading stories, with excellent ajax integration, which really shines on the iphone since refreshing the page can take 20+ seconds, keeping info inline is imperative.

I also want to give credit to the password filler-inner 1password for their iphone interface, and twistori that shows that the same design works on both BS and little if the concept and interaction are clear. If I had a wishlist for sites I wish worked on the iphone it would be cellartracker (their regular site is not too great either, but the content is invaluable on mobile) and chase - if you are really embracing mobile users, let me really bank online.

The environment will change in the next month with the introduction of iPhone apps, but the resourcefulness of these developers to take 'plain ol' HTML and make a good user experience in a very constrained environment shouldn't be lost. Give your comments and contribute your favorites I may have missed.


Design Pattern 7: Required fields

Reqall1

It is one of the first problems of HTML markup that had no standard way to communicate to the user what they should do, I'm talkin' about the required form field. Personally, I have used some sort of asterisk in the past, coloration can work as well, but anything eye catching can distract from an error state (hey, you didn't notice we required that field, try again). So it caught my eye that the good people at reqall have an interesting pattern. In this case, make required fields have a bottom that is different from the non-required fields. This is fairly subtle, it took me a moment to figure out what it meant, but I give them kudos for trying something new. This is a long neglected design pattern of how to handle this in a consistent way, and this is a good a place to start. Its also a way to give a shout out to this service which mashes up text-to-speech, reminder lists, task distribution and has a nifty iphone interface as well, check it out!

How to do it

Here's a capture from their stylesheet, an interesting element here is I didn't know that you could restyle the drawn box of an input, so there is room for much variation. I also like the way they specified 'solid' to get rid of the horrid default 'picture frame' style of merging borders when they don't match, which always makes me flashback to 1998 web design.

 
input.essential {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #016098;
border-right-color: #016098;
border-bottom-color: #990000;
border-left-color: #016098;
}
 

Topics:

Pixel by Pixel…Or how I spent my last 2 weeks designing a few icons

"Our product is shipping globally, and we're not going to customize each device to the language of it's destination country. So we need you to design a set of icons that will be used in place of textual messages."

Challenging, but simple enough, right? Immerse yourself in the product, do some user research, brainstorm designs that are meaningful, descriptive and culture neutral, and there you go. Oh, and one more thing...the device's display is 128 x 64 pixels with 1 bit color depth.

Such was the nature of the project I recently worked on, and it was a challenge of a very different kind then I had faced in a while. With either greater resolution or more color depth, It's relatively easy to depict pretty much anything with a high degree of recognizability. Shading, perspective, non-linear surfaces are all time consuming but doable with one or the other. Yet with only 2 colors and not many more pixels at your disposal, your so much more limited in what you can do. Take a look at some early GUI icons to see what I mean...

Macos11
Lisaos31
Lisaos10

Since I couldn't use more than 2 colors, I couldn't anti-alias, so I was basically confined to horizontal, vertical and 45 degree diagonal lines. Forget about perspective. Since true perspective doesn't involve straight lines, depicting a product from an angle on such a small scale is out of the question. And shading--which is essential in illustrating that a surface displayed head on is curved--is just a matter of starting on the darker side with a high frequency of black, and then lessening the frequency as you move to the 'lit' side of the surface (Take a magnifying glass to a newspaper add to see what I mean). Again, not an option here due to the small screen size, there just want enough room to do that. I felt a lot like a writer being asked to weigh in on a complicated subject using 50 words or less. They say brevity is the soul of wit. I had to be clear and concise if I had any chance of success.

At 128 x 64, every pixel matters. And at 1 bit color depth, rotating, scaling or otherwise transforming anything in Photoshop is useless because the software automatically anti-aliases, creating shades of grey that were forbidden. So I had to design pixel by pixel--make a 1 x 1 selection, put my hands on the keyboard cursors and get to work. See Wikipedia's entry on Pixel Art for a good reference.

As it turns out, I was more at home on this project than i though I would be when found out the requirements. You see back when I was a kid, the first computer graphics program I ever used was on my father's DOS machine. The program itself wouldn't fit on the computer's hard drive, so it had to be loaded via floppy disk--the old 5 1/4" ones. The computer didn't have a mouse, so almost everything I created had to be tediously drawn pixel by pixel using the cursor keys. It took me months working 2-3 hours a night, but I created some pretty good stuff. In particular, I remember drawing a hockey rink, with players, stands and all, which I'm pretty proud of. Using Photoshop/Illustrator now, with the capabilities so far advanced over what I had to work with at that time, It's hard to see how I did what I did, or for that matter why I spent months doing it. But there's something about taking time to do something right, struggling through the frustration that comes with the absence of 'Undo', picking yourself back up after making a mistake that renders 10 hours of work useless. Creating art is a sprint. Back then it was a marathon.

So I forgot about my mouse, left the color picker behind, and zoomed in at 1600%. I soon found the hang of it again, and I got in the groove I remembered from way back. After a lot more time than I though it would take, I had a set of icons that worked...and that's the key. And in the end, I feel a little more satisfaction than I would have if I was allowed to let Photoshop do it's magic.

Topics:

About Pathfinder

  • We design and build extraordinary applications for companies looking to make the next great idea a reality.
  • learn more

Topics

WordPress

Comments about this site: info@pathf.com