Surprisingly, the often undervalued learning aids seen in interface designs are one of the most successful ways to help your users get from confused to competent  Using different learning techniques correctly allows you to increase the value and complexity of your application without risking the learning curve. Advancing users and enabling them to become more productive, efficient, and informed, taking advantage of more features and functionality faster. Taking the intimidation out of technology can make products more enjoyable and create beneficial experiences that don’t take a huge investments to get up to going.

Why Learning Aids are Important

In sovereign applications designed for intermediate to expert users learning tools are crucial in getting users from novice to productive. It applies equally across both information and interaction design. However enterprise applications aren’t the only interfaces where people get confused. Every day new interfaces, applications and websites pop-up, many of them expecting us to modify our mental model to understand their concept model on the fly, but as Facebook has learned, people don’t respond well when you move their cheese, unless you can manage that change properly, and get people back up to speed quickly.

Tip flags, tours, guides, etc. These are not new ideas but unfortunately they are often underused in design. It is also usually the most complex software that looks past these tools, expecting users to take the time to learn with training, hours of discovery, social learning through friends and co-workers or by using the manuals and FAQ’s.

Learning tools are about subtle supplemental highlights at just the right moment. Done well they are nearly transparent while helping people get up to speed quickly and avoiding missed opportunities in functionality. Done poorly they become distracting annoyances and irritating interruptions. Like everything in interaction design, there is a fine art to getting it just right.

Learning tools aren’t just for first timers.

Even seasoned interaction professionals need learning aids. I had been talking about up-to-speed aids at work and a co-worker sent me an email after a very frustrating morning with her iPad. She said her iPad had been locked on the wrong orientation and she was unable to fix it. After much frustration she concluded the accelerometer was broken. It wasn’t until a couple weeks later when she was using her iPad with a co-worker that he suggested trying to double click the home button and swipe left to get to the orientation options. It fixed her “broken iPad” immediately. She found this very frustrating because the button on the side of the iPad had been remapped to a mute control and she had no idea it had happened. She was further confused because her iPhone still worked the original way. How could she have known?

I have had similar ah-ha moments myself. A few weekends ago my step-father showed me a panoramic feature on my phone, after I mentioned how much I hate that my phone didn’t have this feature and that I had been trying to find a suitable app for panoramic photos for years.

As Interface designers, our primary goal is to facilitate a conversations between people and technology and in order to facilitate that we can’t take for granted that over time the interactions will change and the user will need to be brought back up to speed. Learning tools help new users as well as existing users acclimating to our constant updates.

It’s normal for users to not to understand every interaction right away, and even for those of us who understand things quickly, there is usually an “ah-ha” moment for waiting down the road where we discover how to do something we never thought we could and didn’t know existed.

Whether you are learning something for the first time or relearning something that was known, when something changes everyone must re-frame their perspective. Built in learning aids support our growing communities of users in understanding the changes we make and improving their experiences by helping them move from beginners to intermediates and stay there.

Very large changes can be made without users noticing.

The estimate from neuroscientists is that our five senses are taking in 11 million pieces of information every second – Susan Weinschenk. Think about that for a second. All the senses we have trying to process all of the pieces of information in our environment pulling for our attention. Yet we only consciously process 40 pieces of information a second. That means the other 10 million 100 thousand and 9 hundred and 60 pieces of information every second are not getting our conscious attention. Then, even when we decide to pay attention to something in our environment  or something that we are doing that doesn’t necessarily mean we will remember it. Our short term memory has a limited capacity and very short duration.  Our long term memory isn’t great either. What we perceive does not automatically become learned memories, instead our perceptions often decay quickly.

We suffice, and learn only what we have to.

Add technology to the mix of the millions of every day pulls at our attention. Every day new interfaces, applications and websites pop-up, many of them expecting us to modify our mental model to understand their concept model on the fly. Worldwide 30 million apps are downloaded each day, and don’t forget about websites. These apps are constantly being updated. Trying to keep up with and learn how to use all of the technology in our environment takes a lot of conscious and focused attention.

To deal with this overwhelming pull at our attention we find ways to take shortcuts. Once we learn a sufficient way of doing something we latch on to that process and tend to favor it over other options, even possibly more efficient ones. Familiar tasks are easier to us because they require less cognitive load, less conscious attention. Looking for new solutions takes time, and cognitive load away from everything else we have to deal with. We will take a longer familiar path, over the work of finding a new quicker path when we need to get something done.

So imaging how frustrating it must be when you have gotten so used to something that you can nearly do it with your eyes closed and then the interface changes. Suddenly and without much choice, we have to focus on it again and learn a new way of accomplishing our goals.

Accomplishing goals faster and discovering the unknown.

Interface learning aids serve as a conversational tool between the application or website and its user. Good up to speed aids help shape a person’s understanding of the tools they work with by politely offering assistance to the new user, and pointing out changes to the returning user. Allowing users to get up to speed quickly and removing required attention will make them more efficient, and make the experience feel easier. Provide up-to-speed aids for users to become experts like keystrokes.

“Showing users exactly what they’re getting into and helping them get up to speed can make them comfortable, eager to dive in, and immediately knowledgeable.” – Designing the Obvious by Robert Hoekman Jr.

Learning tools allow our users to take full advantage of updates faster by providing a subtle tips and training in the system when and where you need them. These tools also help to set expectations, framing the important elements against the distractions. Showing them where to focus to see the primary goals of the interface. Draw people to, or call out important information that has changed in an interface, Offer help and user assistance features in the context where users need them so they don’t have to travel to a separate help section and memorize steps before returning to the problem at hand.

We naturally look for cues to help us reach our specific goals in the interface and tend to only notice things we think are related to our goal. We can aid users by providing clear information scents (cues)

6 Types of Learning Aids

There are 6 different types of up to speed aids that I have identified, and a few rules by which to best utilize them. There are two groups, 3  of the aids are for new users: They are Maps, guides, starters, and 3 are for existing users: Announcements, tours, and tips which are often seen after a change or update has been made to the system

Maps: Provide a high-level overview of the space.

Like a map at the beginning of a city. Give the user a high level overview of a new design or page layout prior to entering the page itself. they are not interactive, but rather a flat representation of features in a page, or across portions of the website. The take up only one panel or page and closing them takes you right into the website. Maps usually have cues called out to help the user understand areas or points of interest. They can show up when you enter the website of application for the first time, or if you enter a new page for use a feature or the first time.

Guides: Point out interesting landmarks and techniques.

Like a guidebook you read that points out all the interesting stops you’ll want to make Guides are essentially interactive maps. Instead of showing just introductory functionality on one page, these are multiple pages long and go into more depth on the features available and how they are used. They provide additional assistance and direction by moving through various areas with map like cues however they are not in the context of the application like tours, they are visually separated from the task at hand and presented in their own dedicated set of pages or panels. They are often called “tours” but I separate them from tours because they are not in context. Guides, like a guidebook you read in advance, tours are something you do once you get there.

Starters: Get you moving.

Set Up Aids are little getting started aids that you only see at the default state. You see these the first time you use a website or application. They let you know what do do next. These aids may be panels that get you moving, a form that gets you to start setting up, or a chooser to determine the type of starting state you’ll like best

Announcements: Broadcasts of change.

Announcements are about informing users about layout and functionality changes. It’s important these aren’t used alone, they should be used in addition to maps, tours or tips. Announcements are just that a brief message or broadcast. They are a lead in to get users prepared to accept change.

Tours: In context walk-through of landmarks.

Tours walk you through a number of features in a step-by-step process, and may or may not use flags to point things out on the way. These are often used after a change has been made to the interface,However they can also be used to get people up to speed. Unlike maps and guides, these are done in context of the application or website, and directly walk the user through the important parts of the interface step by step. Often other areas not currently part of the tour are dimmed out to aid with focus and attention.

Tips: Highlighting things you may not have noticed.

Tips are little bits of information or instruction about ways you can get more out of an application or website, things you may otherwise not discover without advanced or regular use. Often flags shapes are used to provide tips. These are visual call outs that draw attention to a particular feature with a bit of text, These can get new users going, or show a change or new feature in the interface to a user.

To recap…

Good up to speed aids allow you to increase the value and complexity of your application without risking the and reducing learning curve. Advancing users and enabling them to become more productive, efficient, and informed faster. To be fair I have left out tool tips. I am taking these as a given, as they are not used once, or dismissed permanently  rather constant reliable fixtures always available to help clarify icons, buttons, and actions in an interface.

Additional Resources

• Tooltips and Infotips: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511495.aspx
  

Like many folks I’m an avid Gmail user. I love Gmail. One of my favorite newer features is the tabs that have been added to separate the mail from the Inbox to other tabs like Promotions, Social, Updates and Forums. There are many reasons I’m a fan of this and part of it is the way that the design supports human nature. The idea of sorting physical mail is natural and when you go to the mail box I bet most of you start flipping through your physical mail.. bill, ad, trash, oh a letter how exciting,… bill, ad, trash, bill, bill… etc. These piles are a natural way of understanding what we have received and organizing the information. Big thumbs up to the designer on incorporating this into the electronic design.

However this brings me to the point. When these tabs went into place some of the other features and functions were shifted to make room on the page. To my disappointment one of these items was the check box that appeared above all of the other check boxes to allow me to select all of my messages. So, I began the habit of individually selecting my emails and then deleting them all at once. I picked this habit up without consciously really thinking about it, more just a matter of perceived need, and it’s something I have been doing for quite a while now. However, lately it has really been bothering me as I’ve signed up for some extra things and the extra emails have been adding up to a lot of extra clicks. I just want to select all and delete.

Focusing on the boundaries of the main mail area, here is the “old design” of Gmail as of Nov 2011 (still pre tabs). While Google often shows a single line ad dividing the functions and the list, scrolling removes it, and the relationship between the individual check boxes for selection, and the select all check box at the top are clear and close in proximity and alignment. Easy to find and use.

Now here is an image of what I currently see in the main mail boundary today. You’ll notice that compared to the image above where the mail and mail functions are in close proximity, now you see tabs just above the mail instead which represent the organized mail categories.

While some of you wise to the design may have picked up what I’ve chosen to omit in this screen shot, it goes very directly to my point. Where is the select all option? When we look at the screen, especially a screen shot or design comp it is easy to review the entire image and take in all of the nuances. However in reality when we are using software our eyes bounce around at a crazy rate taking in bits and pieces at time as we complete our tasks.

We look where we expect things to be, and we look based on the placement of related items. What we actually focus on at one moment in time with our visual fixations is roughly the size of 20×20 pixels. It’s much easier than you might imagine therefore to simply not see something on a screen that is roughly 1280×800 as your eye is bouncing around looking for something. I failed to see the select all check box because it wasn’t where I expected it to be, which would have been just above the individual row check boxes. Instead it has been moved above the tabs.

This goes back to basic design principles like the Gestalt grouping principles and proximity. The closer items are to each other the more likely they are to visually be perceived as a group and therefore related. You might say “Lauren, it’s pretty close, you should have seen it.” Well, maybe, but I didn’t. I’ve been passively looking for that silly box for probably over year.

Now, I do believe there is another reason that I constantly seemed to miss it related to the way I go through my mail. My process is to start selecting items as I scan down the list… check, check, check… then I’ll often say to my self I don’t need any of these and look for the select all once I’ve started this process. So I’m looking to select everything after I have already checked a few of the emails. In this case our select all check box looks different:

Now the action bar is not only a step removed in proximity, but the check box I’m looking for can’t be found because there simply isn’t a check box icon anymore. Now there is a box with a minus sign which doesn’t trigger any type of “select all” action to me. It’s an icon that I’m not familiar with in relation to the task at hand. If anything, it reminds me of a minimize icon used for closing windows or panels.

This brings about an entirely new issue of familiarity and standards that I wont get into here. However, the point that I would like to make is that even though the icon is unfamiliar, if it had been placed in better relation and proximity to the action it controls I most likely would have figured it out. See below of a mockup of how this might look with the proximity fixed. The relationship is much clearer.

A quick search of “gmail select all” in Google images reassures me that I am not alone, as this obviously has needed to be pointed out to many people.

In my attempt to order lunch this afternoon I was rendered stupid. One of those moments, where a website literally made me feel like an idiot. Then after a brief smack of my palm on my forehead I decided to post a reminder, that form should never replace function. This was my experience.

I did a quick Google search for the restaurant across the way. Just to set the context, here were my goals and expectations as a user:

1. Review the menu.
2. Look up their phone number
3. Call and place a lunch order for pickup

I assumed this would be easy peasy. Until I opened the website. This is what I saw:

That is actually, all I saw. A beautiful image with some left and right arrows. Since the arrows caught my attention I clicked on them expecting to get into the main website content, and this is what I got next, another image:

The images are beautiful, and making me even more hungry, but I don’t seem to be getting to the content. So I’m clicking again and again wondering when the links will appear. These images have been designed to appear full screen no mater the resolution of your screen. They show from edge to edge and I don’t see a scroll bar (thanks to the way the Mac OS hides it). Then it occurs to me… what if I tried to scroll down anyway ?

Ah Ha! [hand smacks forehead moment] Pardon the pun on the image but a light went off. After thinking I was crazy, I now feel like an idiot. But this isn’t my fault. The website should have never given me the opportunity to feel this way. While the design is beautiful, clean, simple and has great images the primary function is not to show off photography. This is a restaurant’s website and in this way it failed me. The primary navigation is only accessible by scrolling down from the main image, and it stays that way on every single page. Click… scroll down, click… scroll down. Additionally, since I’m on a Mac there is no indication that scrolling down is even necessary. Yet, the designer has encouraged with large white arrows that the user scrolls left and right through this gallery.

Now that I have figured this website out, I clicked on the menu and picked a salad, closed the menu and clicked on Contact. At this point I am expecting to see an address, and phone so I could call and order. Instead this is what I saw:

Again, there is no indication that there may be more information. The page has been designed to appear full screen with no peaks or hints at additional content. Clean and simple yes. But I don’t have a lot of confidence that sending an email with my order will result in a quick turn around time. Thankfully this time I had learned my lesson and tried to scroll down. Sure enough at the bottom of the page was a reservations number that I was able to use to order.

In hindsight when taking screen shots to post this I did also notice the number at the bottom of their menu… but it was also just perfectly hidden that I never saw it first time around.

This is a very simple example, and should have been an invisible experience. Unfortunately what should have taken me a couple minutes and made me feel successful, took more than double the normal time and lead to a lot of frustration with me feeling stupid. I hope this serves as a subtle reminder in this day of “make it look simple”. That there is more to a website than simple, clean, and pretty, It also has to work. Most importantly, simple is hard. It cannot be accomplished simply by removing, but must be a detailed analysis of the most important information to show.

Here are the tips I found to be most useful in most circumstances:

• Don’t Type it, Show It
• Have a Primary Visual
• Visualize Data Creatively
• Headings Create Flow & Anchors
• Use Space, Shapes & Columns
• Less is More, Keep it Simple and On Point.

I think if I were to modify it, I would also add something about color.

1. Use acronyms to reduce the amount you need to type. Quick written or typed shortcuts will be critical to increasing your note-taking speed and balancing note capturing with participant observation

Example:

• FAC: = Facilitator
• EE = Employee
• DOP = Design Opportunity
• w/o = without
• n/a = not applicable

2. Focus on getting the users reaction to interactions, and their emotions about that reaction. Pay attention to side comments. This is often when the user expresses their goals and needs. Use italics and quote marks to show quotes.  When observations or feedback is long, emphasize areas of importance, and use “[…]” for areas that are inconsequential.

Example:

Likes “Mobility”, but doesn’t understand why it’s under Career & Education.

Example:

Mentions needing a way to search by people who have particular skills & responsibilities (focused on a retiring EE) “Will I be able to pull their names up and get information on them?”

Clicks the find by drop down, and moves around screen, hesitating “How do the successors get in here?” scrolls around, […]. See’s and clicks on the Add button to the right. “How do these names come up, is this everybody?” The results seem to cover too many business units.

3. Note facilitator interactions that impact the users flow, and potential video clip opportunities. This can be especially helpful when going back over your notes later to show where multiple assists were given versus those times that participants were able to breeze through with less assistance or prompting. This can also help the facilitator in pilot tests to understand if tasks are worded in the best ways, and where participants are most likely to stumble.

Example:

FAC: Rephrases Scenario.. scans nav…, FAC: Asks to re-read scenario.. she continues scanning…

She clicks the Back action button to return to Succession Plans, “I don’t see the director of sales position, should I try to find it?” [CLIP]

FAC: asks her to re-read scenario

4. When possible note the user’s passive actions as well, especially when it uncovers possible usability issues.

 Example:

Lost Window, behind main window – FAC: Aided her back to window. DOP: avoid using a popup?

Continues to scroll around for more info, Awards> Previous Employment, Tests, etc. She likes separate full pages, and liked that Talent Profile was a summary of them.

5. Provide information on things that are missing as well.

Example:

She had to leave early – task not attempted

Example:

User seemed distracted, and kept asking the time. They did not feel the product applied to them.

6. When possible try to keep information grouped so that it is not missed in the review, if a participant skips around between tasks, simply note that.

Example:

[Task 11]

(Continued from Task 7) – Asked about the bold number, and number in parenthesis, could it be an open position?

She likes the ability to export the chart. – (Moves back to Task 7)

7. If a bug is discovered in the system, be sure to note it.

Example:

BUG: The Talent Factors page loads by default. (Should be Talent Profile)

8. As far as tools, I always recommend a pen and paper if the customer can see you while taking notes. However during review, or if remote I personally like to use a tool like OneNote or Excel because it easily allows for entering screenshots and remote collaboration, as well as tagging text with icons for easy reference. Hopefully these tips are helpful to you in reducing the amount of text you need to write to get to the good stuff.

Depending on the type of test you may also want to look out for metrics like time on task, SUS survey scores, task satisfaction ratings, and overall user confidence ratings.

7/9/2014: Update~ I’m happy to announce that Gmail has made some improvements. When recently clearing out my inbox on my phone I saw this fun screen

Original Post:

After much work and dedication, I finally emptied my inbox! This is a big deal, and not something that happens to me often, if ever. I as I responded to and deleted that last email trumpets went off in my head, a band started playing, and I expected streamers to rain down from the ceiling. But instead, this is what I saw.

Lets start with a review of how I see Google’s personality and then look to see if there is another possible scenario for how Gmail could have handled this accomplishment.

Google’s Personality

Personality is something that must be considered throughout the design in a number of ways. For example a website can leverage colors, fonts, imagery and communication style to portray their character. It can be a part of error messages, sales hooks, success statements, and even your company mistakes. So what is Google’s personality?  Here are some screen shots that I feel highlight their personality as I see it.

Now to be fair, most of what Google does is get out of the way and let the content show as efficiently as possible. Their text is clear, succinct and to the point and their character is subtle. You don’t see it splattered all over the place, but Google does shows hints of character. You can take your chances “Feeling Lucky” with search results, make your mail view “Cozy”, check out the latest logo art, try out the Labs and even change your language to Elmer Fudd. It is subtle, but it is definitely in there.

So after my email accomplishment, I felt a little lack luster by the single “!” at the end of the sentence stating that I have “No new mail”. Being realistic and taking into consideration their subtle but present personality, and the fact that you most often see this same message when creating a new account, I would have still preferred something to this effect instead. Maybe they could even add on a little delight and have a group of canned messages that change each time.

]]> http://www.sitemotif.com/2013/10/no-new-mail/feed/ 0 http://www.sitemotif.com/2013/10/wireframing-digging-into-the-details/ http://www.sitemotif.com/2013/10/wireframing-digging-into-the-details/#respond Tue, 01 Oct 2013 21:26:22 +0000 http://www.sitemotif.com/?p=2491 Interface design is a complicated process. Designs are rarely created in an ah-ha moment so much as they are the result of a process that takes lots of time and thought. Designing interfaces involves lots of analysis, many conversations and multiple rounds of iteration before a hand-off is solidified and agreed upon. Many aspects must be considered such as the intended users, their goals and tasks, business goals, business scope, the technology, budgets, timelines, constraints and so on. To help deal with the information overload there are many tips, tricks, principles and best practices used in the design community as a basis for forming initial designs and analyzing the multiple aspects of a designs interactivity throughout the itterations. However there are also some lesser known best practices that don’t get as much attention as others. I decided I would like to focus this post on 7 design principles which are sometimes missed or not given as much attention by UX designers as they might deserve.

1. Design the Auxiliary

Auxiliary information and controls are often an afterthought, or considered part of the medium through which the interface is being used. These however, should also get some attention and thoughtful design. Auxiliary details include controls like screen splitters and scroll bars as well as content like supplementary feedback through word count, saved statuses and more. The auxiliary is about quite feedback and subtle controls that can sit quietly and unnoticed until they are needed. Think about how Microsoft word shows the total number of words in a document on the bottom corner of the application. The information is supplementary to the primary task of creating a document. It doesn’t get in the way but it is easy to access when needed.

2. Integrate Up to Speed Aids

Are you creating something new, a big change or moving someone’s cheese? Don’t forget to think about the life-cycle of the person using your interface. How will they get up to speed, and what level of expertise is expected to use what you are designing? Separate what you expect a beginner to be able to do, versus an intermediate, and an expert. Can a beginner use the basic flow? Are expert features accessible but unobtrusive? With more and more touch interfaces, novice users don’t always discover swipes, multiple taps, and gestures that are required for major parts of the interface. While there is a large generation of users who have now grown up with technology, there is also a large group of users who have been forced to learn technology. Is your system accommodating both approaches? Ensure that beginners have the tools to become intermediates, and motivated intermediates can become experts. Then ensure that experts can easily move through the interface without beginner aids slowing them down.

3. Determine User Attention

With all of the mobile first excitement, some interfaces are coming out bare bones when they need to be more complex. Mobile first doesn’t necessarily mean simple, but rather the appearance of simplicity is often a complex orchestration of functionality that enables the user to complete their goals while appearing to be simple. Consider if your interface will be used for long periods of time, for brief tasks, or if is is something that should be in the background without drawing attention to itself until it’s needed. The amount of attention that is expected will impact the way people approach the design, and the way the interface will need to support them.

4. Represent Visually

From gestalt principles to graphics, every visual conveys a message whether or not it is intended. We also have a better memory for visuals then we do for words. When laying out your interface think about places where visuals could replace descriptive information. If a graph could be used for data, what type of graph would be best. Consider the visual hierarchy of the page as well, we often forget about the good ‘ole gestalt principles, but they are affecting perception whether we design for them or not. What about the 8% of men who are color blind, does that affect your design?

5. Consider Multiple Views

In mobile platforms we see landscape and portrait as two different views which can accommodate different layouts and have a different hand postures. But what about different views of the same information? Think about calendars with their agenda, day, week & month views as well as publishing software with print, web, editing, and presentation views. Think about the different types of information needs people can get solve with different views. Are multiple user archetypes trying to get at different pieces of information from the same feature? Views could help solve this problem by providing the appropriate information for the appropriate context.

6. Account for Microinteractions

Probably one of the most egregious and most common missing items from a many designs are explicit and detailed interactive specifications. The devil is in the details and microinteractions are the heart of the details (a term coined in the new book microinteractions by Dan Saffer). We become so used to our own mental model and assumptions of how interface controls and patterns work that too often necessary annotations and analysis are missing from deliverables. These often subtle yet important details can easily draw the line between unobtrusive invisible interfaces, and obvious clunky interactions and interruptions. Littlebigdetails.com is an excellent blog that digs into the details of the little things that make a big difference.

7. Sign Your Work

In architecture blue prints are meticulously designed with every centimeter accounted for, every tick mark in the right spot, and at the bottom of every design a title block with all the relevant information about the design. This helps not only the creator reference it later, but additionally makes it easy to share and provides context. However too often designs are passed off with well known working groups and the assumption that the project and creator is clear. Over time though as teams changes and projects are referenced outside of their original context those details become important. With every design provide your name, the project, the date and the version of the design at the least.  The folks at eightshapes have some great templates that always account for title blocks.

What additional tips or best practices would you like to see more commonly in interface design?

That’s not to say there haven’t been many attempts at change. There is a great Branch article where PJ Onori proposes some solid ideas behind what it would take to change the save symbol from a disk. Citing the image, it’s meaning, the concept, and it’s context as some of the reasons it should be redesigned. Some brilliant minds propose a number of possible design solutions critiqued by the group, but nothing quite a perfectly solves it as clearly as the antiquated save icon does.

Its such a popular topic of conversation, that NPR even did a story on the floppy disk icon. A quick Google image search for “Save Icon” shows the disks powerful staying power. One disk after another peppered with only a few attempts at replacements.

So what if we didn’t change it? There is a great article on the subject of iconic glyphs in use with old origins by Scott Hanselman. I think it shows that even though the save disk doesn’t have much relevance as a disk, it still has a lot of relevance as a idiomatic symbol and concept which is widely recognized and used in modern software along with many others. Idioms, unlike metaphors are learned.

Idiomatic user interfaces solve the problems of the previous two interface types [Implementation-Centric and Metaphoric ] by focusing not on technical knowledge or intuition of function, but rather on the learning of simple, nonmetaphorical visual and behavioral idioms to accomplish goals and tasks.

Idiomatically speaking, something can be both cool and hot and be equally desirable. We understand the idiom simply because we have learned it and because it is distinctive, not because we understand it or because it makes subliminal connections in our minds. Yet, we are all capable of rapidly memorizing and using such idioms: We do so almost without realizing it. – Alan Cooper: About Face 3

Bryan Clark posts an interesting thought in the same Branch article from before, where he notes that the save icon itself is starting to disappear regardless. Lots of software auto-saves your work reducing the need for users to manually seek out a save option. Could this lead to the eventual removal of an icon all together? Is it not just the save disk, but also the act of saving which is becoming antiquated?

A couple good additional discussions on the subject from StackOverflow: Save Icon: Still a Floppy Disk?, Save Icon, Is the Floppy Disk Icon Dead?

Update: I just ran across another great article,  In Defense of Floppy Disks on Boxes and Arrows about the disk icon. This one clearly on the side of keeping the save icon and even employing a survey  to prove the validity of its recognition as a save symbol. Good read with some interesting statistics on that and other common icons.

Design Links

11 Principles of Interaction Design – I love the simplicity of this article, as well as the overall simplicity of the website design itself. I particularly enjoyed #1 on Experience and Expectation and #6 on Functional Layering. These are valuable principles that are often touched on in the basics as mental models, and 80/20, but I felt that this article did a better job then most at succinctly touching on the depth behind what these principles  embody.

Applying Divine Proportion – This is a great introductory article into the golden ratio and rule of thirds in layout design while also adding some additional design tips.

an optimal number for comfortable reading lies between 60 and 80 symbols per line.

A Craft of Consequences – I enjoyed the evolution of this little article that explores the idea behind experiencing the sensory emotions that come with physically well designed books, versus those read on popular e-readers. More than sentimental attachment to physical books, the author brings up interesting points about the value lost in media presented on a flat screen versus the richness of a physically well designed tactile experience.

A 20 minute Intro to Typography Basics – This is a great short article that sends me back to my design school days with great simple explanations of some popular terminology in type from Kerning to Ligatures. Fonts and typography are something I have been very intersted in lately with their relation to and ability to stand alone in design.

What Font Should I Use? – Speaking on fonts, here is a nice reference article on the basic font families and some rules for using and mixing them.

Design Exploration

I also did some design explorations on a logo for a friends small BBQ company. He needs a logo that he can sticker for packaging design, here are some of the ideas I played with:

• Designing for Emotion by Aaron Walter: I came by a conference video of Aarron Walter the other day that was pretty well done. If you haven’t read his book yet and want to get up to speed on Designing for Emotion I recommend it.
• I’m always a big fan of User Focus and in their April newsletter I found it a wonderful reminder of the practical level of knowledge to expect from general users. My favorite quote from this issue is “There’s an old rule in marketing that says you don’t tell people about features, you tell them about benefits” because it helped me to write some more usable copy for a project I’m working on.
• Speaking of copy. Another great article I recently came by is Writing Microcopy by Joshua Porter. A nice reminder that the little details even in copy can make a big difference in the overall conversation a user has with your website or application.
• I’ve also been exploring inspiration websites like Behance, Dribble and Pinterest for inspiration with a project I’m working on. I’m loving the way Behance shows portfolio work in a vertical scrolling image list similar to an infographic. I think this is a great way to market not only the product, but the UX process behind it. Dribble is fantastic for inspiration, but I found their “bucket” adding feature a bit kludgy compared to Pinterest. I’ve officially become addicted to Pinterest, aside from my normal personal boards I’ve now added 8 or so UX boards and counting like UX – General, UX – Wires and Prototypes, and UX – Design Inspiration.
• One bit of inspiration I found that helped with a drag and drop interaction specification and some edit interactions was Bill Scott’s Designing for Interesting Moments presentation on Slideshare. I particularly enjoyed slides 40, and 43 where he brings light to methods of detailing interaction specifications and interface discoverability.
• Finally, I’m seriously digging the new Facebook feature that adds emotions, and what you are doing. I did a similar design with social emotions for a client a couple years ago, unfortunately it never went to market Alas, so cool to see the idea taken on by such a major player. Hopefully this will help kick off the trend of designing more emotion into our applications and websites.

As always, if you want to be totally overwhelmed with UX happenings in the industry feel free to check out my UX feed board on Netvibes.