|
|
|
|
|
|
|
|
|||||||
|
Argentine tango blog: Interaction Design interludes by Oleh Kovalchuke |
|
|
|
|
|
|||||||||||||||||||||||
|
|
|
 |
 |
 |
 |
|
|
|
|
|
|
|
|
|
|
||||||||||||||||||
 |
 |
 |
|
 |
|
||||||||||||||||||||||
|
 |
|
|
|
|
||||||||||||||||||||||
|
 |
 |
|
|
|
|
|
|
|
Interaction Design Advice and Solutions
"All you need in this life is ignorance and confidence, and then success is sure."
Mark TwainFebruary 10, 2008 - How to present Boolean logic ("AND", "OR" questions) in a graphical user interface
Present Boolean logic as a two step process in a guided/faceted search/navigation. Peter Morville's collection of these patterns on Flickr and one of the examples.
September 15, 2006 - Look, mom, no clicks!
Dontclick.it - an example of the interface, where one doesn't have to click - mouse movement replaces the clicks. It's quite good, however (there is always however):
- The interface requires fairly precise mouse movements from the user. Slips are costly to correct, require large mouse movements.
- In the Autopilot example clicks are not eliminated, but replaced with additional and precise mouse movement - no gain in time or simplicity.
- The real problem arises when user needs to move cursor across the "reactive" areas to interact with nonadjacent parts of the interface, as in the recorded examples table (The 'Autopilot' reactive area).
- The fluid interface is somewhat disorienting in spite of thoughtful addition of animated transitions.
- How does one bookmark an area of the site?
July 20, 2006 - Do keyboard shortcuts always facilitate work?
Juan Lanus wrote about unwillingless of some users to learn software shortcuts:
This amazes me. Shortcuts are one of the best kept secrets of the Windows UI. For example, many people ignore they can switch tasks with the alt-tab-... sequence.
Consider switching tasks with alt-tab in larger context. I have used alt-tab with Windows 3. Not anymore. Because it is simply less mental effort to switch windows by clicking the visible button on the TaskBar in XP.
Letter based shortcuts are vestiges of command interface. The well-known argument against command interface, and therefore against shortcuts is human preference of recognition over recall.
Another, less obvious argument is that shortcuts violate consistency principle. Take for example wordprocessing: as you type you know that if you need to highlight a word, you reach for the mouse, if you need to rearrange the text, you reach for the mouse, if you need to check the spelling, you reach for the mouse. Typing - keyboard, editing - mouse. Now, assume that to make some text bold you use shortcut key for bold instead of reaching for the mouse. This keyboard shortcut interaction would create inconsistent behavior for editing.
Also since I always pause as I work, the unconscious, mechanical interaction with mouse punctuates my work without breaking the flow.
In a test I recently made with a 75 years old CPA, I confirmed all this. He uses computers since ever, and PCs since long time ago too. He was not aware of any keyboard shortcut.
Decision to design for shortcuts should take into account user background. For instance, mastery of shortcuts can be used to build self-esteem. As one learns shortcuts, he might claim membership in the exclusive group of the 'Power Users' (instant three-prong boost to self-esteem via authority, scarcity and social proof). 'Engineers' (personality type) love shortcuts. Accountants, Writers, power plant Operators (occupations) satisfice, and would rather spend time doing accounting, writing, power plant operating - the tasks, which extend far beyond the tool, instead of attempting to memorize shortcuts within the tool.
"Serendipity – is like looking for a needle in a haystack and discovering a farmer’s daughter."
Julius Comroe, Jr. via Matt Jones (Dopplr)February 16, 2008 - Good talks from the first IxDA conference (Interaction 2008, Savannah, GA)
The Design Ecosystem by Bill Buxton, Microsoft Research.
Design culture - right tools, process, technique, partners, attitude (and design politics of mutual understanding of business, design, and engineering goals). Many ideas bring along good ideas, thus the importance of "throwaway sketching".
Concept Models, A Tool for Planning Interaction by Dan Brown, EightShapes
Mind mapping to analyze and understand domain. Concept models (Joseph P. Novak from Cornell) precede flowcharts and wireframes, at the very least vocabulary is agreed upon. They define scope - inventory of concepts (list of nouns from domain experts) and interactions (remove redundancy). "Views" and "components". Validation - implications (importance, what is missing etc.). The concepts from the expense report as an example. Circling nouns in the requirements doc is an interesting approach.
User Interface Design in an Agile Environment Jeff White and Jim Under, Jewelry TV.
Description of Agile development (role sharing, mentoring, sprints, team ownership).
"Design Studio" - brainstorming with examples:
- define user goals, IA (the data, the objects, the interactions, which should be included in the prototype), scenarios (empathy), tasks, concept models - 5-6 days to 1 month
- brief engineers
- everyone comes up with possible sketches (~2 h, 4-7 concepts per person, not one elaborated concept)
- the sketches are discussed (facilitation), agree on the best ideas (explain why): 2 minutes per concept presentation, 8-10 minutes discussion (write good/bad ideas from the concept on giant post-it notes)
- take a break, review the goals. Consolidate good ideas into one design.
Redesigning Sony Ericsson's Product Catalog by Saskia Idzerda, Media Catalyst
Good, practical and illustrated story of website re-design with international perspective. Agile prototyping. As far as I could see, the sliders were tested with one pointer only. I wonder, if the testing results would be different, if the sliders had two pointers to select a range of values. Also"green" is not good indicator of size. Good observation on limitations of usability testing vs. statistical analytics (multivariate or A/B tests).
Designing for Flow by David Cronin, Cooper.
Nice examples of design for the "flow". The "friction" term in the end of the talk is unfortunate choice of word, since the word's main meaning is feedback (also important for the flow experience), not manageable challenge/stress. .
Everyday Objects by Bill DeRouchey, Zibi Design.
Illustrations of cross-pollination design concepts. Icons, buttons, colors, shapes, motions, gestures, UI personality, focus, affordances, constraints.
Classic Design Movements and IxD by Chris Bernard, Microsoft
Mostly Bauhaus ideas etc. Collaboration mashup as a new movement (Gray Album etc.). Sustainability, diversity, accessibility.
Don't Make Me Click by Aza Raskin, Humanized.
Good interface is no interface. This talk needs slides. Shovel as an example of overdesigned (surrounded by machinery from Microsoft), and overprettied (encrusted with diamonds by marketing) product.
July 10, 2006 - The meaning of command buttons for dialog boxes
Robert Hoekman asked:
Somehow, before I started with my current employer, a decision was made (arbitrarily) to use "OK/Cancel" buttons for everything they applied to, regardless of whether or not something else, like "Apply" or "Save", would offer more meaning.
.... Any ammo is good ammo.
How about some heavy bullet-points molded at Microsoft's armory?
Jack Moffett wrote: "One issue I've had with Okay/Cancel, and even more so with Yes/No, is that you have to read the dialog to be sure of what you are committing to."
True, and this truth is reflected in the recommendation for dialog boxes from Vista UI Design Guidelines (the guidelines, incidentally, are very reasonable):
- "Use positive commit buttons that are specific responses to the main instruction instead of generic labels (such as "OK"). Users should be able to quickly grasp the options by reading the button text alone. Always start commit button labels with a verb."
Do not show the guidelines themselves to your employer, Robert, since within the same section one of the illustrations appears to contradict the recommendation. Oh, well...
The issue with dialog in the illustration is systemic: if you replace 'Yes', 'No', and 'Cancel' buttons with more direct 'Save', 'Discard', and 'Cancel', there will be semantic clash for 'Discard' and 'Cancel' buttons.
The root of the clash is in the different scope of 'Cancel' and the other two actions action. While 'Cancel' applies to dialog regardless of content (like 'X' button in the upper right corner of window), 'Save' and 'Discard' are actions related to the content, yet visually they are not separate from 'Cancel' button. This is an example of problem, which was created by Visual Designers for Technical Writers, and which should have been fixed by Interaction Designers.
Solutions:
- Specific: Spell out 'Discard Document'.
- Generic (for all dialogs in Vista release): Visually separate 'Cancel' from content related command buttons.
June 27, 2006 - Small usability issue, big design problem
Cindi Thomas wrote about small usability issue:
Scenario: User reaches character limit for any given form input field. Should the cursor automatically jump to the next field in the sequence, or should the move to the next field be a conscience, manual, user task?
I see both sides... and am personally annoyed by auto moving cursors, but that is just me and not necessarily a best practice! :-)
Usually manual tabbing is unconscious (sic), automatic user task. And so introducing auto-tabbing violates expectations, flow, consistency of function (different terms from different sources) - one has to stop himself from tabbing.
On more fundamental level this question illustrates the subtle, and often misconstrued (in design) difference between two meanings of the word automatic: one - operated without external control, two - operated without conscious control (the difference is in the level of process control by user: in the second definition user does not relinguish control, he simply delegates it to unconscious reflexes). The well known example of this misunderstanding is none other but that paragon of annoyance - Clippie.
June 21, 2006 - How to make frequent filling of web forms less annoying (solution for applications)
Setup (from Simon Asselbergs at IxD list): Web application, frequently used by staff, who need to fill the form with 26 fields. 8 fields are filled all the time, the rest infrequently.
Problem (from Simon again): Design interaction so that the form fields can be accessed by tabbing. Should the tabbing order include all 26 fields or only 8 frequently used fields?
Solution (from me): Provide keyboard shortcut to enable/disable seldomly used fields (without hiding them) and to simultaneously expand tabbing order to include the enabled fields.
Feasibility (from Suresh JV): Keyboard shortcut (keyboard access key) functionality for web applications: http://www.alistapart.com/articles/accesskeys/. An example of show-n-hide fields in web form [show-n-hide is not as user friendly as enable-disable interaction - OK]: http://stylephreak.frogrun.com/uploads/source/cssform.php
August 24, 2006 - Blogs, modal checkboxes and action buttons
Jana wrote:
I have been trying to figure out why the radio buttons for published/draft status in some blog applications seem wrong to me.
....
>In my case I am particularly concerned about a checkbox on a properties form that essentially says "make available". (This is applied to a blog entry)
I was trying to figure out if "being available" is a state or a property. I believe that this should effect whether it is applied through an action or through the existing checkbox in a form.I think you describe another case of mode button related to the recent discussion of Play/Pause toggle.
In the case you have described, blog entry status ("state", "mode", "property") and action to change the status are combined in one checkbox, hence are confusing (the alternative to "make available" is not obvious).Raskin describes similar example in The Humane Interface and recommends using a pair of radiobuttons instead of one check box. That would work, but, personally, I would prefer to separate status indicator ("Draft" label, for instance) and action button ("Publish").
Related thought: "Publish" is probably the single most important and frequently used action in a blog ("Unpublish" could be more important, occasionally). It should be accessible via visible button, not hidden in an obscure checkbox in properties form.
June 10, 2006 - Mailing lists and Blogs - different tools for different folks, or what is the media message?
Mailing lists is medium of socializing, market conversations, community building. These, Extended Brain qualities of mailing list are invaluable to get quick answers to specific questions. The corollary to community building is that in the long run the most accepted, powerful voice on a mailing list is that which speaks to the "lowest" common denominator. Mailing list is good tool for developing common infrastructure in emerging fields.
Since there is no personal reward in exploring banalities, blog is medium used for expressing [hopefully] original opinions. In this sense it is similar to books or magazine articles - curious people might want to seek and read them to get interesting perspective.
In a word, blog is medium of dissent; mailing list is medium of orthodoxy. These, of course, are generalizations; moreover, generalizations, which work in the long run (years) over many discussions and posts.
Examples: blog as voice of dissent - James Wolcott; well-aged mailing list as medium of lowest common denominator - Tango-L.
June 11, 2006 - Decisions, decisions...
Bruce Esrig on decision making process:
My intuition about "cognitive load" is based on what a user must learn in order to formulate and reach a goal at a web site.
The elements of the cognitive load of purposeful action at a web site are:
- understanding the categories (at two levels, content and controls) used at the site
- formulating a goal in terms of the categories - understanding enough of the decision tree to chart a path to the goal
- understanding enough of the site content and controls to traverse that path - understanding the content and controls at the destination
If the user is in a highly exploratory mode, "formulating a goal" could happen quite late, or could be rather spontaneous.The decision making is actually simpler: we recognize one helpful-looking pattern and pursue it until it proves to be wrong. If it is wrong we retract and look for another helpful-looking pattern. Very much in line with satisficing described by Krug's book and quoted by Jeff Howard.
Well researched book on decision making is "Sources of Power. How people make decisions" by Gary Klein.
To guide decisions chunking and playing to stereotypes is the way to go.Apr. 30, 2006 - Online version of Paper cut out dolls game
Anonymous from Gussy online has asked: "Can ideas like this work?".
What you are offering is online version of cut out paper dolls game. It is more engaging experience than watching photographs and will appeal to the same people who used to dress up those cut out dolls.
Problems with current implementation and several suggestions:
- "Available Items" area is too big for smaller monitors - jeans will not be visible. Put "There is more" indicator if user needs to scroll. Consider constraints of future expansion of the catalogue due to company growth. In the later case you might use this kind of page as an engaging interaction for exclusive selection of "featured" items.
- Consider highlighting mutually nonexclusive items in the "Available items" area.
- Consider using single click for item selection/removal instead of drug-n-drop.
- Consider adding "Save This Outfit" option for side by side comparison of two or more different ensembles.
- Disable "Buy Now" when no items are selected (for mannequin dressed in underwear only).
- Present "Buy Now" action as visibly clickable button. Place it under the list of selected items.
- Show both item description and price without animated rotation.
Apr. 8, 2006 - Selecting appointment time
Two visual suggestions.
1. http://finance.google.com/finance?cid=694653
Time selection at Google Finance site. The top scale would represent working hours period (obviously there is no need for zoom window).2. http://tinyurl.com/ovcre
Product rating at Amazon - scroll to the bottom of the page to "This DVD and You" section to view example. Imagine time in 15 minutes increments instead of stars. Select start point with mouseover, select end of appointment with click. Re-select new time with the same technique.Suggestion #2 simplified (hence time saved in all senses):
If most appointments are half hour long you could provide a scale in half hour increments where one click would select appointment time. Two hour appointment would result in four clicks. For edge cases provide 15 min scale and "Show time in 15 minute increments" button, which swaps the scale (if user preselected half hour interval it is preserved and displayed as selected). All of it is fairly simple to code.
As a result most users would select appointment in one click with few selecting it in fewer than four clicks - less than drop-downs approach, which forces _everyone_ to do at least 6 clicks (drug counts for click). Tremendous savings of time for everyone concerned.
Feb. 10, 2006 - Sounds of forest to monitor nuclear station or any system health
Lada Gorlenko wrote to the IxD list:
I found this very intriguing:
iSIC is short for information music. It is a unique research project which explores the use of musical rules as a way to convey information. iSIC is a monitoring system, sort of a baby sitter for big complex systems. The complex system could be a large network, a server farm or a nuclear facility. iSIC lets operators mind the activities of systems through precisely mapped sounds which play pleasantly in the background.
I am clearly not an expert, but slightly modified concept seems to be very much viable as secondary monitoring system.
Some common sense thoughts:
Music tastes are varied and ever changing (personally and lately I prefer to listen to Argentine tango, jazz and techno pop for background music). Finding pleasant background music for a group of people could be challenging.
Why not use forest as a background sound?
Let's say forest represents entire nuclear station facility. In the 3-d environment sounds from different clumps of trees in the light breeze could represent related parts of the system chugging along, occasional songs of specific birds - periodic updates from critical variables (bird songs, length and pitch could change), a moose rushing toward you through the underbrush - emergency from that particular part of the system.
Ah, the intriguing possibilities... One could monitor system performance via headphones anywhere, even in the bathroom. Imagine the nail-biting suspense of moose in the bathroom.
--------------------
Well, it's hard to come up with an entirely new idea. Enters stage right Peep! The Network Auralizer (via Marc Rettig (idea proposal and the paper describing the idea)) with soundbite examples. Here is relevant description of the idea proposed in 2000, six years ago:
It's implied in Star Trek that Engineer Scott can tell whether the ship is running well by the sound it makes. Instead of looking at just a computer screen, Commander Scott uses all his senses, including touch, hearing, and smell to know whether things are going smoothly. Even the computers hum and beep appreciatively when running smoothly, and acknowledge all commands with an enthusiastic response of beeps and gurgles. A network is very much like that starship; it is large, complex, and difficult to describe in pictures. Why shouldn't we incorporate our other senses into the process? If we can create a semiology, in which individual sounds distinguish activities, and sonorities represent states, we can define normality in terms of the gestalt sonority it generates.
Over the last 6 years, since Joan Francioni and Mark Brown first sonified parallel computations[2,3], little has been done to exploit the representational qualities of sound in describing network behavior[4]. Partially this arises from the difficulty of using musical representations that remain pleasing regardless of the data they represent. This, in turn, came from an insistence upon using pure tones as a representational medium. We consider the problems of tonal combinatorics too difficult to solve in general, and instead take the very radical approach of layering natural sounds to represent an event stream. In this way, the resulting sonorities can be made both representative and naturally metaphorical for the network states they represent.
The Star Trek implementation is a bit closer to what I was thinking about - surround sound feedback from different parts of the system. Otherwise the homology of thinking is uncanny - wind, birds and frogs... No moose though. Also I think as apractical implementation it is a bit radical for current culture. Maybe in another 5-10 years.
Feb. 9, 2006 - Forthcoming tooltips
If you use tooltips there is system-defined delay before tip shows up. To indicate that tip is there David Gee suggests:
Another tip with icons with rollover text - because tooltips show after a system-defined delay, sometimes people aren't immediately aware that I'm there. You can alleviate this by changing the CSS cursor property to "help", so that when they rollover the icon, the cursor changes to a question-mark, giving them a clue that there's info "underneath".
Dec. 30, 2005 - It is human to err
It is human to err. Indeed it is and so whenever a mistake happens and system works as designed in the typical engineering “blame and train” approach operators are blamed. Of course this blame is misplaced since very often “as designed” is the real culprit. Here is why.
There are two kind of errors: slips and mistakes. The slips are errors of reflexive thinking – we do stuff without conscious thought, “as usual” while circumstances have changed. Mistakes arise when there is misalignment of concious mental model and operational model of the real world. By the way we operate with the mental models of not only instruments and objects, but also images of the others, world in general and images of ourselves. In case of objects the errors often can be effectively prevented by design (mental models of other people are improved via communication and mistakes of self-perception require psychoanalysis).
What are common errors of design leading to human errors by operator? I think misinformation is catch-all definition. Misinformation leads to erroneous mental models and hence to mistakes. Misinformation also does not provide clear feedback of changed circumstances and thus leads to slips. Misinformation includes information clatter – too much of irrelevant info (especially under stress).
There is another effective error prevention mechanism which should be considered in design (this one has been pointed out in many of Donald Norman’s works). We, humans happen to be social animals and if there is an effective way to share tasks among group of people the collaborators might be able to catch mistake in time for it to be corrected. This is where Wiki excels as has been demonstrated by recent attempts to fraud it (and why corporate Wikis could be life saving for progressive companies built on lateral cooperation).
Specific techniques for error reduction: use of constraints and affordances; provide clear system feedback, which reinforces correct conceptual models; reduce noise; provide tools of collaboration within design, and of course whenever possible include system history and undo actions.
Jan. 30, 2006 - The ugly charm of pie charts
Comments on both properties of single pie chart and on comparison of multiple pie charts.
The Good
Pleasant to look at – womb-like circle conveys wholesomeness, target and focus.
Recognition: everyone has encountered and recognizes them.
Nutritious name.The Bad
More than 5 data points (slices) per pie are difficult to show.
Low data density.The Ugly
Two dimensions (area) are used to display changes in one variable.
Ambiguity of interpretation: size of slices is estimated based on size of arcs (51% of test subjects), area (25%), angles (23%) or chords (1%) by different users.
Size of larger circles is underestimated in comparison. Perceived area of a circle grows 0.8 times slower than actual area. Significant personal variability in the perception data.
Often diameter is chosen instead of area size to compare two pies.Feb. 16, 2006 - Ambient devices
The product concept is way, way (that's two ways) cool. The website sucks - try to find out more about that ambient umbrella. Good luck...
The concept: Essentially Lava Lamp, which shows useful information beyond spacey globs of goo for those who wish to look and put info into the goo.
Feb. 15, 2006 - Let me be entirely credible with you, my friend...
Website credibility is essential in the era of social information foraging. Here are 10 guidelines from Stanford Persuasive Technology Lab. They don't talk much about latest developments (tags, citations, reviews, gossip - marketplace conversations in other words).
|
|
|
|
 |
|
||||||||||||||||||||||
|
|
|
|
|
|
||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
