The David Malouf reader

I only know Dave Malouf via his role as founder and ardent champion of ixda, having met him very briefly when he visited Involution Studios last year. I personally have no idea about his schooling and degrees and training; but he’s clearly an influential voice in the field, which got me wondering about what he’s written and said about interaction design that’s publicly available for consumption. So I googled around and found the following articles (listed here in no particular order), which I’ve started to skim and will absorb and interpret fully soon…

Aesthetics and Interaction Design: Some Preliminary Thoughts (PDF)

Foundations of Interaction Design

Interaction Design and ID: You’re already doing it!

Tips for Designing Powerful RIA’s

Designing powerful web applications using RIA (slideshow)

When starting a project

Key things to focus on at the beginning of a new project:

1. People:

  • Identify all the key players, get their contact info (email, phone, IM) and their physical location/time zone too
  • Get their schedules of availability for this project, including days they telecommute (WAH)
  • Identify the official decision-makers and approvers: technical, business, design (tech = engineering + QA leads)
  • Identify the role of other people involved (contributor, informed, etc.) and who to expect might pop-up down the road
  • As the project evolves and scope is re-defined (which always happens!), more or different people will enter/exit as needed, adjust as necessary

2. Process:

  • Decide the working style and process
  • Decide whether to do in-person, phone conf, web conf, etc.
  • Decide level of day-to-day involvement
  • Make sure all in agreement, with room for adjustments down the road

3. Deliverables:

  • Decide what the final deliverables will be and how success will be measured/identified
  • Decide what the working/interim deliverables will be and how they will be reviewed (see Process above)
  • Make sure all in agreement, with room for adjustments down the road

4. Schedule:

  • What are the deadlines and milestones? What is expected at those points in time?
  • Make sure all in agreement, with room for adjustments down the road

5. Materials:

  • Gather the latest version of critical documents as fodder/material for analysis and discussion
  • MRD, PRD, ERD: all technical and business requirements
  • User Research: all personas, scenarios, use cases, taskflows, architecture or concept maps that have been done already even in preliminary form
  • Prototypes, if any
  • Screenshots, specs if any, and photoshop files
  • Latest builds, if any

Handy keyboard shortcuts (mac)

Totally not about design thinking or process, just a few basic old-school keyboard mnemonics for the mac, for getting certain typographically correct marks, from Andrei at the studio. Bookmark this permalink!

© (opt G)
â„¢ (opt 2)
® (opt R)
‘ (opt ])
’ (opt shift ])
“ (opt [)
” (opt shift [)
– (opt -)
— (opt shift -)

Simplicity in design

Simplicity has certainly become the new black, or has been in vogue for the last few years at least, from John Maeda’s concise book of principles to widespread proliferation of the term among blogs, magazines, conferences, an so on. (see Fast Company, LukeW’s postings, or even Microsoft’s publicity for Media Player v11)! Yes, “simplicity” is all the rage! But what does this concept really mean for interaction designers striving to achieve the best possible user experience for a specific audience?

First for guidance, let’s refer to what Paul Rand, the legendary graphic designer, famously said:

Simplicity is not the goal. It is the by-product of a good idea and modest expectations.

Let’s unpack that briefly:

1. A good idea: The assumption here is that the idea is a compact concept, describable in few words, gets to the essence in just a few seconds and is quickly comprehensible by another person. Going further, the idea is “good” if it takes in account a particular audience, situation, task/context, and so on…essentially solving a specific and articulated problem.

2. Modest expectations: Let’s face it, engineers and marketers love to cram a ton of cool features, buttons, gadgetry and wizardry…all those marketed “bells and whistles” that heighten expectations to absurd levels of functionality, warping devices into unwieldly contraptions of complexity. True, customers mostly buy for the features but more likely, their quality of use (QoU?) depends on the usability/desirability of just a few core features for routine, typical usage.

If you have a “bad idea” (that is, an unclear concept or muddled view of the proper problem to solve for, or something that tries to be everything for everybody, thus lacking focus and purpose), simplicity will not result. Something confused, fussy, inchoate results (ah, the “inchoate experience” that John Dewey admonishes against…more on this later!). Likewise if you have absurd expectations of doing too much for too many people or similarly “un-modest” expectations. (A great reference is Humble Masterpieces, which highlights the value of good design in ordinary, taken-for-granted objects that populate our lives)

Ok, so that’s one highly valuable take on simplicity, applicable to a wide range of situations. Here’s my personal view of the matter, particularly regarding designing for hi-technology situations like software and devices.

I like to think of simplicity as either a material issue or perceptual issue, though not necessarily exclusive of each other.

Materially, simplicity is in terms of actual buttons, controls, features, and so forth that a person has to decipher and interact with to perform some action. This is the way most people think of simplicity–get rid of all those features and controls and have just one button! Pare things down to the bare minimum and then going no further til you excise all extraneous functionality. It’s an exhausting but necessary ritual for designers, a multi-pass, iterative effort of successively winnowing things down by elimination. Minimal buttons, minimal lines, minimal icons, etc.

Another approach, which I believe complements what I just described, has to do with the perception of simplicity–does it appear to be, or suggest a quality of simplicity. Two products may have the exact same number of features but they are expressed in different ways. One may involve keyboarding for power users versus another which has large colorful icons for casual users. Each is perceived as simple given the goals, tasks, and mindset of the user: the set of experiences, training, knowledge.

Also there is manipulation of visual variables and cues to emphasize certain items and tone down others, or using white space to let the most important items dominate, or cleaning up alignments and spacing to make all the clutter appear organized, clean, orderly, and sensible. It becomes easier to interpret and thus derive meaning and relevance to the user’s primary goals and tasks. Perhaps certain controls are given greater spatial proportionality versus others, or features that are needlessly complex (an endless series of dialog boxes or radio buttons) are recast in other forms that suggest compactness and finality of process (i.e., there’s an end in sight or quick exit, which offer assurance and security).

Ultimately, it’s important to note that simplicity has alot to do with user’s perception as well as knowledge and experience brought to bear on the situation, in addition to the physical number of buttons and controls the user has to interact with. Having a good idea shaped by modest expectations doesn’t hurt either :-)

Involution UI design guidelines

While re-organizing and cleaning out my laptop, I re-discovered the interface design guidelines document Andrei and Donna created at Involution for our major client, Agile Corp. This has proven to be a highly valuable document, which also served as the platform for the class Andrei and I taught at San Jose State University last fall on interface design. It also became a handy tool when speaking at the Silicon Valley Codecamp event last fall too, when audience members demanded to get an easy listing of “core principles” for constructing intuitive, compelling UI’s for software products.

The design guidelines are as follows, focused on the craft of creating elegant, useful interfaces for websites, software, etc.

1. Mental models: For your software product to seem “intuitive” it needs to correspond to the user’s understanding of the system, expressed commonly as a simple meaningful metaphor

2. Structure: Wireframes are an effective means of organizing content into tidy, clean structures of data and functionality, per a rational proportional grid system. Keep the grids flexible yet consistent.

3. Direct manipulation: Second-hand information is no match for first-hand contact and interaction. Consider the mouse and keyboard as extensions of the user’s hand, trying to grasp on-screen info and commands. Beware of performance, latency, and feedback issues.

4. Terminology: Just call things what they are, avoid clever or cute marketing labels which only confuse users. Stick to standard industry names when possible.

5. Remove visual clutter: Remove extraneous ornamentation or lines or other noise that distract and interfere with user’s reading of a screen.

6. Flatten complexity: Every icon or button or control represents an exponential growth in decisions and options the user has to consider. Reduce redundancy and inconsistencies. Consolidate and flatten the interface.

7. Emphasis: If every control and data element is given maximum visual treatment, then nothing is standing out. Use thoughtful contrast and embellishment to call out certain elements. Decide which are more priority than others. If everything is emphasized then nothing is clear.

8. Typography: Follow the rule of 3–First start with 3 font variations to keep things simple and stick to it as much as possible before introducing more fonts. A font variation is anything that varies the font: size, color, style, weight, and of course typeface itself. Most visual noise and clutter and overemphasis is due to having too many fonts.

9. Color: Color is used to create emotion, mood, and also punctuate/emphasize elements as needed in the interface. Stick to a base, a highlight, some complements and black/white. Use color judiciously!