The Curse of Knowledge

You can never know too much about something, right?  Wrong, at least according to a December 30th article in the New York Times.  As we become experts in a particular domain, our ability to innovate diminishes.
"Andrew S. Grove, the co-founder of Intel, put it well in 2005 when he told an interviewer from Fortune, “When everybody knows that something is so, it means that nobody knows nothin’.” In other words, it becomes nearly impossible to look beyond what you know and think outside the box you’ve built around yourself."

Reading the article, I couldn't help but think back to my own experiences with this same sort of issue.  I blogged recently about two related ideas: how interface designers are sometimes guilty of thinking as designers--when they should be thinking as users, and about the mixed bag that is competitive research, which can limit the designers creative thinking by boxing them into predefined solutions.   

Now I see that it's part of a larger problem of expertise and creativity.  The more expertise one exhibits in a particular field, the harder it is to think creatively--to so called think 'outside the box', and the harder it is to imagine not knowing what you do.  The problem affects whole companies, as a certain way of thinking becomes entrenched, and it gets harder for it to adapt to a changing landscape.  The article cites the example of Eveready, the flashlight maker, who's powers-that-be couldn't imagine that their product could be effectively marketed to anyone other than men shopping at hardware stores.

According to Cynthia Barton Rabe, author of “Innovation Killer: How What We Know Limits What We Can Imagine — and What Smart Companies Are Doing About It,” the solution for Eveready, as for any organization bogged down in its own expertise, is an infusion of outside thinking.  Bringing the so called novices--the non expert users--into the discussion at the early stages of design, weather it be product or strategy design, opens the door for new ways of thinking that experts have long been insulated from.


    
     


Powered by ScribeFire.

Design can be Used for Good and Bad

Every so often I'm rudely reminded that much of the information I get comes from a source who's goal is to sell rather than inform.  It is those times that I'm also reminded of the critical role that design plays in supporting the goals of the organization (wether they be to inform or to sell) by shaping user behavior.

Case in point.  I use Yahoo Finance to track my stock portfolio and stay financially abreast of the day.   I choose Yahoo over the many others out there because I'm used to it.  It has a simple interface and I know where everything is located.  It also has great tools, and it aggregates information from many many other sources in one place, which I find invaluable.  However I just recently noticed that Yahoo Finance is serving some text ads on the site now.  I wouldn't otherwise be too bothered by them, but they've been designed for the express purpose of looking like real (un-sponsored) content.  They're right up there on the right hand side of the page, occupying the top of one column in a three column layout.  The ad titles are just about the same color as the headlines and links on the rest of the site.  And while the other section titles are all orange and bold--designed to give structure to the page and let you know what section your in-- the only way you can tell that your reading ads is from the truly inconspicuous (light-grey on light blue, thin, all caps) 'Advertisement' header.  

This really infuriates me, especially because it's a finance site, and I can't help but notice the content of the ads.  For instance, right now I'm looking at the front page, from left to right I see a snapshot of the Dow's performance today, a headline saying 'Stocks mixed ahead of jobs report' and a couple of blurbs on 'Hottest China Stock' and '16 Hot Dividend Stocks'.  Now I'm sure you can guess which ones are ads.  And yet I can't help but see the ads and incorporate them into my understanding of the days financial news.  They were designed to be scanned, and that's exactly the kind of information I need to be able to filter out when I'm scanning a page like this.

The fact that these ads persist is a clear indication that Yahoo is concerned less about an informed public and more about using its real estate to extract as much equity as possible.



Powered by ScribeFire.

Dasher - A new way to write

I simply love finding these little gems on my weekly web excursions.  This time it's a fascinating new piece of software out there called Dasher, and it allows you to write without typing or scripting.  What's that you say?  How else can you write?  Well...The basic idea is that current methods of typing are inefficient, because they don't learn.  Let me explain.  Although there are x number of letters in the alphabet, every pressed key reduces the number of available choices for the next key press, and increases the odds that other specific keys are pressed next.  For instance, 'E' is much more likely to be pressed after 'H' than 'B' is, and 'O' more likely after 'G' than 'C'.  On current writing technologies it's up to the user to learn to be more efficient at writing He than Hb or Go than Gc.  But that doesn't need to be the case.  By taking advantage of the learning and memorization power of the computer, it's possible to create writing interfaces that guide you through the process rather than just recording what you type.  If you'll indulge me in some metaphor, imagine rowing down a river.  Dasher is the river with a strong current to wherever your going, and existing typewriting technology is the river with no current whatsoever.   

Picture_4 What Dasher does is use language patterns to present likely letters and words to the user based on the letters or words they have already written.  The goal is to make writing more efficient by reducing work.  There are no keys to press using dasher.  In fact the mouse is never clicked.  The interface allows one to write by simply navigating the mouse down a path--or tree--through the alphabet.  The start screen displays all 26 letters of the English alphabet.  You select a letter by moving your mouse next to it.  As letters are selected, Dasher displays all available letters again, but this time those more likely to be chosen are larger and therefore easier to select.  As you write, you move forward through the tree, and entire words and phrases are displayed in order of likeliness.   

Dasher needs some work before I start using it instead of my keypad, but the idea has real merit, and it deserves to be explored more.  As an interface designer I see at this tool as a great example of how simple interactions, when thought about creatively, with nothing held sacred, can have potentially revolutionary effects on the way we interact with technology.
 
 

Powered by ScribeFire.

On the Benefits and Pitfalls of Competitive Research

Competitive research is part of the design process at Pathfinder. By competitive research, I mean spending time getting to know how others have solved the problems you are confronted with.  We do this type of research separately to start both the Information Architecture and the Visual Design phases of our process.

Recently, though, I’ve been thinking about the net effect of the importance that it plays in the Visual Design process.  Specifically, to what extent does it help, and when does it hinder.

One the one hand, it can be really dumb to start designing something without knowing what has already been done in that space.  Starting from scratch can be a real time waster.  It pays to take advantage of other’s successful design thinking as it relates to the problems you have to solve, because they might have been solved already.     

However the more immersed one becomes in a particular domain--the more exposure one has to the state of the art--the more boxed in one can get.  You become accustomed to seeing problems not as challenges in need of creative thinking, but as patterns that conform to some already defined problem/solution set. Then all you have to do as a designer is simply find that matching set.  It may sometimes be easy, even more often than not, and there may be projects when doing this is the best you can hope for under the current constraints, but eventually it’ll hurt you as a designer, because you can get to used to searching for patterns. Cliché as it may be, your creativity is like a muscle. You have to exercise it daily for it to grow.  And not all problems have a matching solution yet.  There will always be unique problems that will require you to solve them on your own, and you’ll be caught off guard if you haven’t practiced using your own design skills.

I would say that for competitive research to be an effective, and positive experience in the long run, it has to be balanced with a healthy dose of skepticism.  As a designer you should open yourself up to what others have done, and in fact realize that it’s very important not to design in a vacuum.  But as you explore those designs that came before you, keep in mind that it’s up to you to use your creative skills to come up with a solution. You can’t let your skills sit in the dark, while you let others do the hard work.  Eventually it’ll come back to bit you.  Take what works.  There’s no reason not to.  But even then, don’t just consume it, deconstruct it.  Take a designers critical eye to it, so you can learn from it and grow as a designer.



Powered by ScribeFire.

Writemaps: A web based site map generating tool

Came across an interesting web tool today...Writemaps: A site map generating tool that allows you to build, edit and share site maps. 

It's got limited features, but it has two big things going for it:
1 - It's web based, and you can share your files via url.  So anyone with a web connection can view and edit what you've created.
Picture_1_4

2 - It creates presentable sitemaps.  The page representations (nodes in the site map tree) have subtle gradients and drop shadows, and the tree diagram contains only right angles, giving your sitemap a polished professional touch.
Picture_2
A few other notes about this tool:
Can't print or save as image, but you can save as XML.
It's got an undo button! (how many web apps do that?)
You can zoom in/out on your map views.
It's dead easy to get started.

In summary, there's a lot of potential here, and I think I might give it a try on my next project.

Powered by ScribeFire.

Tabs should be clickable

New UXD Rule:  tabs and buttons should themselves be clickable, and not just the text that appears on top of them. 

Why:
Because if we are going to use real world metaphors, they should be complete.   If the entire surface area of a button is clickable in the real world, then it should be on screen as well.

Example:
The use of the tab metaphore on the Typepad interface is incomplete because only the text on the tabs are links...
Caphsot

2 approaches to design...

On his blog Accessites.org, Tommy Olsson describes two approaches to designing a web page, the Visual and the Structural.  Although the article is mostly about how designers and developers have different workflows, in it he goes on to say that among other things...

Visual designers see a web page as an image: the colours, shapes and images define the page; the content is something that populates the various areas of the image. This is a design-centric view

This strikes me as a poor understanding of Visual Design.  Any Designer worth the paper he sketches on should know that Visual Design can only work as a part of a system; thinking in terms of colors and shapes before content and structure is a recipe for a poor design.

The Article

Toolbars: An Interface Designer's opinion

As a designer, it is very important to me that the software I use provides me access to the functions I need without interfering with the creative process.  Since I use a 15” monitor at work, screen space is always at a premium, which makes it even more critical that the tools in the applications I use are in there when I need them, and gone when I don’t.

Toolbars, Pallets, Panels, whatever they’re called, they are the entities—stationary or floating, separated or attached, minimized or maximized--that give me the access to application functions and object properties that I need to do my job.  So I spent some time in the apps I most frequently use at work-- Microsoft office, Photoshop CS, Illustrator CS, GoLive CS, Flash Mx2004—moving, attaching, snapping, connecting, splitting, minimizing, scaling, customizing, the hell out of these things, to try and get a good idea of how effective each is at making my life as a designer as stress free as possible.  Here’s what I’ve found…

Microsoft Word
The good
The application does a good job of knowing what I need when I need it.  For instance, the formatting toolbar, which appears above the document window by default, contains all the necessary tools I need about 80% of the time.  And the picture toolbar opens when I’ve selected a picture, disappearing when it is deselected.  The object specific toolbars, such as Table, and Picture provide an easy way to edit specific objects quickly without running through menus and submenus repeatedly.

Toolbar icons are self-explanatory. I almost never need to think very long before I understand which button I need to press to perform a specific action. 

The arrows to the right of toolbars with extra functionality present less often used, but still important features in an easy to get to manner.

The customize dialog box allows me to completely reconfigure my toolbars by adding and removing tools.  It even lets me create new toolbars to support my workflow.

The not so good
Word_1Each individual toolbar is its own mini window, and the screen can get cluttered if I need many features for a specific task.  The lack of ability to quickly collapse or snap toolbars together is a major limiting factor in the usability of the application.

There are no tool presets—which are saved workspace layouts, so toolbars that have been opened or shifted for one purpose will have to be re-shifted or closed manually, one at a time, to support another task.

Since toolbars are mini windows, I would think to look for them in the ‘Window’ menu.  However they are located in the ‘View’ menu, alongside options for viewing the current document such as rulers and guides.  I’ve been using word for over a decade, and I still trip up on that one.

The verdict
Nice tool set, conceptuality works well, but the screen can get cluttered, and finding some tools is counterintuitive.

Total Score: 5

Photoshop CS
The good
PhotoshopThe contextual toolbar docked at the top—added to the interface in version 6.0—makes fine tuning the your selected tool quick and easy.  The palette well can be used to station any number of toolbars in it, so you can move about freely without shoving windows around to make space available.
Individual toolbars, called palettes in Photoshop, can be detached and inserted into any of the toolbar mini windows.  This effortless customizability is a real plus. 

Saving and opening toolbar presets, called Workspaces in Photoshop is also a breeze.  Rather than constantly shifting palettes around, you can save separate workspaces for individual tasks, so, for example, If I’m color correcting, I can save and use a ‘Color Correcting’ workspace, which contains the histogram, color palette, channels and layers opened in separate mini-windows for one click access.  Hen when I need my original workspace I can call it back with one click from the ‘Window’ drop down menu.

The not so good
The palette well does not allow docked pallets to be opened, so access to any of their tools requires an extra click…not a big usability loss, but when you’re involved in a repetitive task, it adds up.
Although mini-windows snap to each other, they cannot be connected; so quickly nudging your entire toolset to grab an errant object on the canvas is not possible.

Mini-windows can and frequently do get hidden behind other mini-windows.  I’ve wasted way too much time looking for the Character palette, which the ‘Window’ menu item says is opened, but I can’t find it, because it’s hiding behind another palette.

The ‘Tools’ palette for some reason refuses to get with the program and become a dockable, attachable, closeable mini-window just like its siblings.  I’m not sure why this is, perhaps Adobe’s user research suggests it works there, but I would rather the enhanced control and customization of the ‘Tools’ palette.

The Verdict
Big strides every release, but there’s still a ways to go.

Total Score: 6.5

Illustrator CS
Insofar as the display and behavior of toolbars are concerned, there are few significant differences between Illustrator and Photoshop, so most of the advantages and disadvantages of the latter apply to the former. 

The good
IlustratorOne small difference between the two apps is the ability to separate tools from the ‘Tools’ palette in illustrator.  This nice little feature enables easier access to all the sub-tools in the palette.

The not so good
However there are two significant features missing from the app.  Neither the Palette well, nor the ability to save workspaces appear in Illustrator.  What the reason is for this, who knows, but at least as of CS 1 Illustrator lags behind Photoshop in this category.   

The verdict
Why the difference between Illustrator and Photoshop?  There’s too much of a lag between the two apps to be acceptable.

Total Score: 4

GoLive CS 2
Although an Adobe product, GoLive’s toolbar look and feel departs quite substantially from that of Photoshop and Illustrator.

The good
There is a tremendous amount of flexibility, and customization capability in this interface.  Almost everything can be moved, removed, attached, docked, resized or closed.

I like the idea that every palette can detach to become its own window, including the tabs that reside in the main site window by default. 

The ‘Tools’ palette can be resized (but only because the palette is now contextual to the editing mode you’re in—itself a useful feature to deal with the complexity inherent in an application of this capacity). 

The toolbar at the top of the interface displays different tool sets for view modes.  For instance, when in site view mode, the toolbar will show site-specific tools.  Opening an html file will cause the toolbar to display a new set of tools related to document editing.

GoliveThe major departure from Photoshop and Illustrator is that floating mini-windows can be attached by stacking one on top of the other. Thus allowing all attached palettes to be manipulated at once.  Each individual palette can also be minimized using a small min-max triangle at the left of the palette, an elegant solution to the problem of screen real estate that maintains palette grouping, allows quick access to functions, and drastically increases the available space.

The bad
The sheer number of things you can do in Adobe GoLive CS2 makes it difficult to find the function you need at the time you need it.  The application has a very high learning curve for precisely this reason. 
Although you can take apart the site window palette by palette, you cannot attach those palettes to the toolbars.  The interface doesn’t make the distinction between the two types of palettes very clear.

Stacking toolbars is not a very intuitive action in GoLive.  There isn’t enough of a visual queue to let you know that they can be stacked.  You sort of have to discover it by accident.

The verdict
Lots of features, not enough flow.  I still don’t know where to find most tools, and I’ve been working with the application for a year now.

Total Score: 4.5

Flash MX 2004
When working in 4 dimensions, it is critical to be able to view your canvas, as well as have unfettered access to you timeline and key framing functions, so animation workspaces need to be even more sensitive to the screen real estate issue. 

The Good
FlashFlash does a very good job of utilizing the space your monitor provides it with.
The position of the timeline is extensively customizable.  It can be placed alongside the top, left or right of the canvas, and it can be removed as well, becoming a floating mini-window along with the other toolbars.  This configurability keeps me from getting lost in the timeline no matter what type of project I’m working on.

Another useful feature of the interface is that most toolbars can be stacked, minimizing the screen space occupied by tools not in use at the moment.

It is also possible to save workspaces as in Photoshop, making it simple and quick to move between workflows

The not so good
It would be nice to be able to dock the timeline underneath the canvas, but the UI allows docking on only 3 sides-strange, since the timeline in adobe’s other animation application, After Effects, defaults to underneath the canvas.

The verdict
Overall, the Flash toolbars do a great job of giving me what I need when I need it, and getting out of the way otherwise.

Total Score: 7.5   

CSS Tools: 'Style Master'

Stylemaster_20060710103706I visited Apple's development tools section earlier today, and came across "Style Master", a css editing tool. I decided to take the plunge and see what it can do. Here’s a quick review.

Currently, I use Adobe Go Live CS2 currently to edit my style sheets, simply because it’s a lot easier to use the same tool for your entire web workflow. So I will compare some of the features in Style Master to it. Keep in mind, Go Live does a lot more than style sheets, but with it's latest version, CS2, adding a number of style sheet related features, editing and manipulating CSS is a major part of the Go Live interface.

Helpful for Beginners
Style Master looks to be designed especially for those at or near the start of their CSS adventures. The Read Me file answered some fairly beginner questions, and the WYSIWYG toolbar makes it easy to edit your style sheets without having to touch any code.

There's even a Style Sheet wizard, which steps you through the process of creating a CSS document with the settings you want based on a series of simple questions.

Debugging and Validation
The validation and compliance tools are quite nice. I especially like the bar at the bottom of the window that tells you weather your code is valid CSS1 and CSS 2, and weather it will render properly on every major browser since IE4. There's also a 'Debug' menu option that contains a number of useful sub options, such as 'Validate in Browser' which sends the file to the W3C for validation checking in your selected browser, and 'Report Unused Statements' which will check weather the style you have selected is not connected to any elements in your HTML documents.

Interface
The interface is quite easy to use. I picked up the general idea in about 15 seconds without the tutorial or set up guide. The major features are duplicated on the tool bar as icons, although there are some useful tools that are hidden all the way at the bottom of the window, including the Add and Edit selector actions.

Features
The dynamic search feature makes it easy to find the selector you are looking for in large files. One advantage it has in this regard over Go Live, is that you don't searches aren’t case sensitive, so you can find selectors even if you don't remember what you've capitalized.

Picture1_1
The properties editor is a bit more powerful then the equivalent in Go Live, which groups related properties, and sometimes makes it cumbersome to find the one you want. In Style Master you have the option to view all properties that can be applied to a selector in an alphabetical list.

Performance
The only trouble I got was when I tried to create a style sheet using the Wizard. After I hit submit, it took about two minutes for the application to create the file and open it, during which time I had no control over the interface. I would never use the Wizard in any case, so this wouldn't affect my workflow. However if you like the idea of a style sheet wizard, beware--this might be a little frustrating.

Overall, Style Master is a nice little Style Sheet builder/editor with a number of advantages over Go Live CS2. It has a number of features for those who are unwilling or unable to hand code CSS. It also provides the CSS pro a simpler and easier way to find and edit styles.


Multi Column layout in CSS

The World Wide Web consortium’s (W3C) CSS working group recently released a draft of a new multi column layout module--to be included (with possible modifications) into the CSS 3  specs.  For those web developers that have been lamenting the lack of adequate multi column support in current supported versions of the CSS specs, this is an exciting and welcome addition.

In this article I will identify the basic principles of the Multi-Column model as described by the W3C, and give some examples of how it might be used to layout web pages much more easily than is possible today.

Currently, all content within a content box flows left to right, and then top to bottom, filling the entire content box (minus padding). Multi Column Layout uses a new type of model for the positioning and flow of content within a content box.

The use of the column-box (or column for short) will specifiy that content within a content-box flow in a columnar fashion. Just like table cells in an HTML table. Columns in a content-box will flow from left to right.  The content within each column flows in the normal top to bottom direction.  From the W3C paper:

Content is flowed  into column boxes in the block-progression-direction, and column boxes (or  "columns", for short) are flowed into content boxes in the  inline-progression-direction.

The implications for web developers coding in CSS are tremendous.  The only way to create multiple columns in CSS now is by jumping through hoops.  A simple two column layout requires breaking a content-box into two child boxes and floating them.  Try adding another column and you’ll find it almost a nightmare to code it with enough hacks so that every major browser renders it to a  reasonable degree of similarity.  I have yet to see a fluid four column layout using current CSS box model techniques.

The Working draft offers promise that we can look forward to bieng able to code much more sophisticated web page layouts that are standards compliant,cross browser compatible, and flexible enough to render properly on many different types of devices.
The datails: Multi Column Layout using the ‘column’ property
Multi-column layout will be easy to create in CSS3.  Simply use the ‘column’ declaration on the appropriate content-box.

The Column-Count property
To specify the number of columns you want your parent content-box to be split into, simply use the ‘column-count’ property

body { column-count: 2 }

The Column-Width property
You can also specify the width of the columns by using the ‘column-width’ property.  If you don’t set the column count explicitly, the number of columns will be determined by the column width and the avaiable space within the parent content-box.

body { column-width: 15em }

The Columns shorthand
Use The shorthand ‘columns’ property to affect both the column width and the number of columns.

body { columns: 2 15em }

The Column-Rule and Column-Gap Properties
Use the column rule property to define the style of the rules that separate columns.  It is similar to the border property, and therefore takes similar values.
Use the Column-Gap property to define the width of the gutter in between columns.

body {
  column-gap: 1em;
  column-rule: thin solid black;
}

The ‘column-break-before’, ‘column-break-after’ and ‘column-break-inside’ properties
Use these properties to tell the browser where to break the content within columns.  In other words, the browser needs to know there to move content into a new column.  These properties specify when and where to move content to a the next xolumn over.

h1 { column-break-before: always }
h2 { column-break-after: avoid }
h1, h2 { column-break-inside: avoid }

Multi Column Layouts applied
Using the properties described above, we can quickly layout a page that uses a fluid four column grid in which each column resizes with the width of the browser window--something that is impossible using current CSS techniques. The code below will do the trick…

Create a content-box:

<div></div>

give it an identifier:

<div id=”mainContent”></div>

Now insert your content:

<div id=”mainContent”> Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur…</div>

Create a style sheet and style “mainContent” like so…

#mainContent {
width: 100%;
column-count: 4;
column-gutter: 15px;
column-rule: solid black thin;
}

and voila…
Content within “mainContent” flows from one column to the next.  And since the number of columns is explicitly stated and the column width has been set to auto (by default), the columns resize so that no matter what the window dimensions are, there will be 4 of them…Multicolumnlayout_2

Information Visualization tools

Some would argue that Web 2.0 is a social revolution, not a technological one.  Social networking tools such as Blogs, Wiki's, bookmarking and tagging sites, Mashups, and APIs allow collaboration between users and communities of a much greater quality than ever before. 

As these new tools allow users to share and collaborate in ever more sophisticated ways, social data increases in quantity and complexity.

Emily Chang has posted about a few innovative tools that help users navigate that data...
Visualization and Discovery 

Extending the desktop metaphor

A way cool product in the maiking...

This interface looks and acts much more like a real desktop.
But is it just eye candy, or is it a real advance in digital usability...

Footage of the product on Google Video

The in depth PDF publication

EU Committed to Accessibility

 

The European Union has called committed itself to providing Internet access to all it's citizens by the year 2010. This is more evidence of the importance of providing quality content which is accessible. You can read the full article here. The decision comes as a result of a few disheartening reports about web accessibility for the disabled. From the CNET news article: "According to recent research, 81 percent of Web sites in the United Kingdom are inaccessible to disabled people, while a separate report found that only 3 percent of European public-sector Web sites met W3C accessibility guidelines." As we as a population grow more dependent on the web, it becomes ever more important to ensure that no one is left behind.

The EU's own site on accessibility policy has a sub area on web accessibility. They mention an initiative known as the European Internet Accessibility Observatory or EIAO. This organization's job is to crawl the web looking for scofflaws -- big brother is crawling.

 

What is Web 2.0?

We are  hearing more and more about this thing called Web 2.0 and how it's going to make the world whole.  Or at least that it's going to improve the way we interact with the web. 

But how can we define it?  Is it--as Supreme Court Justice Potter Stewart said of hard-core pornography--hard to define, but "I know it when I see it", or can we make some concrete statements about what it is and what it is not?

From the entry on Web 2.0 in Wikipedia..."To some extent Web 2.0 is a buzzword, incorporating whatever is newly popular on the Web (such as tags and podcasts), and its meaning is still in flux."

A few questions to ponder:
Is Web 2.0 an idea, or is it a collection of objects?
Is it a description of a set of technologies, or a new way of using the computer?
Is its existence primarily important for its functionality or its marketing presence?
Can we define what technologies Web 2.0  includes?

A little more on this subject later on...

 

Ajax and user experience

The increasing ubiquity of Ajax is becoming somewhat of a vicious cycle, as more demand creates more hype which creates even more demand.  As such, it presents interesting challenges for designers.  How do designers weight the pressure to 'Ajaxify', with the needs of the user. 

While Ajax does represent the beginnings of a new way of using the web, Ajax doesn't make sense all the time.  Yet it has become such a hot topic that design and development firms are experiencing more and more demand for anything 'Ajax'.  Frequently, those clamoring for the technology don't really know what it is, nor what it can be usefull for, but they know what they've heard...that it's the hot new thing, and there web site or web app is just not worth the browser its rendered on unless its got Ajax. 

The results can be frustrating to see.  For instance, have you ever come across an instance of a drag and drop module where a simple mouse click is so much easier and more effective?  Yeah it's cool...because, um...well, I'm dragging and dropping something...on a web site...and it's Ajax! 

Designers need to curb clients enthusiasm, so to speak, and make them understand that having the best web site doesn't mean using the latest and flashiest technologies.  It means applying a strong methodology, good user research, and an understanding of heuristic principles to build something that provides users with a useful and satisfying experience.

Biting the hand that feeds us

Talk about poor design!  The Typepad 'Post' page--the page I’m on right now-- is a great example of a poor interface.  What do I mean by this? 
PostWell, lets take a look at it.  Now in my opinion, when we get right down to the heart of it, the object of an interface is to help the user accomplish a task.  Weather the you want to obtain the latest baseball scores on espn.com or to configure an electronic substation monitoring system, the interface you use is designed (hopefully) to help you accomplish what it is you set out to do. 
When building a web site, designers usually have to deal with the uncertainty of potentially large numbers of visitors (or 'users' for consistency) and associated tasks.  However, there are pages like this one here were all users are performing the same task. 
The object of the design here should be pretty straightforward, and that it to make writing and posting a blog as painless and efficient as possible.  The buttons that perform functions associated with posting (such as adding pictures or links) should be easy to understand, and most importantly, the act of posting the blog shouldn't cause lots of confusion. 
Here are some examples of the poor design of the Typepad 'Post' page...The "Insert Image" and "Insert File" buttons are icons with no accompanying text despite the fact that there is plenty of room.
The button that adds white space for larger posts is confusing, again, despite the fact that there is plenty of room for a more descriptive button.  Keep in mind that users, afraid of losing the post they are writing, will be hesitant to click on any links, so it becomes even more important to make button actions clear.
The design blunder that causes the most confusion is the positioning and terminology of the button that does the posting.  When the ultimate object on a screen is always the same, and the completion of the task is accomplished with the click of one button, that button should be named for the verb phrase of the task being accomplished.  In this case I am posting a blog entry.  The button is called "Save", which is not what I think of doing when I want to post what I've just written.  More confusing still, the proper term for the button, which of course is 'Post', is the name of the prominently placed clickable link that erases what you were writing and starts over. 

Technorati

  • --