Mmm Breadbrumbs

 

When you can see the whole path it is easy to know where you are. If you take a hike in the woods, the trail map lets you know where you are going and where you have come from.

You Are Here

When working on your computer or phone, it is impossible to see the whole application from one screen. Have you ever been online or in an application and felt confused- or lost- about where you are and where you want to go? You probably searched the screen for clues to help understand where you are in the scheme of things. One navigation technique that illustrates where you are and where you came from is a breadcrumb. Breadcrumb? Think Hansel and Gretel.


 

Defining Breadcrumbs

A breadcrumb is a device that illustrates each of the pages you have encountered before you have arrived at your current page or screen.

One way to think about this are using the pages in a book. Cover, copyright, table of contents, and chapter 1 are the first four things you encounter in the book. If you go in order and land on Chapter, 1 the breadcrumb will look like this:

Cover/ Copyright / Table of Contents / Chapter 1

Since the breadcrumb is made to help you while interacting with the computer, it can also be used to enhance navigation. To allow you to easily move back through the pages, you can navigate by using hyperlinks on the breadcrumb.

Cover/ Copyright / Table of Contents / Chapter 1

By clicking on the hyperlink Copyright, you will go directly to the Copyright page. This is very helpful when the breadcrumb is short. When the breadcrumb gets too long it becomes more difficult to use.

Can breadcrumbs go too far?

What […]

Luminoso Compass and Frictionless Design

Luminoso announces the launch of COMPASS, their next generation enterprise feedback solution!

Luminoso Compass

Luminoso Compass enables you to consume, interpret, and act on large-scale feedback in real time – across multiple languages. It captures new themes in conversation, extracts actionable insights, unearths the root causes and illuminates the driving themes and topics.  In addition, Luminoso Compass removes spam, irrelevant content, and off-topic discussion automatically.

Michael T. Pullen of  Frictionless Design worked with Luminoso to design and develop the Compass user interface. “I found working with Luminoso exciting,” said Pullen. “The business challenge was to simplify the overwhelming intake of social media and company data to make timely business decisions. The resulting product is a sleek application that allows people to analyze a particular area of interest, group areas into relevant topics, and monitor those topics to see changes over time. Only when the user is interested does he need to dive into the individual messages and posts being monitored. All of this allows users to remain focused on the business impact of the data rather than scanning thousands of Tweets.”

Luminoso is a language understanding company. Their proprietary conceptual engine – born out of a decade of research at the MIT Media Lab – analyzes vast quantities of text in seconds, deriving insights and conclusions that are critical to enlightened decision-making.  Take any form of unstructured text – emails, news stories, research results, social media rants – and identify the ideas, patterns, dot-connections, underlying themes, and buried intelligence. Luminoso can be contacted at info@luminoso.com.

Frictionless Design offers user experience design and architecture consulting services to enterprise-class software companies. Frictionless Design can dramatically improve your ability to deliver products on time and ensure customer acceptance. Michael Pullen […]

Frictionless Clients: High Stakes Assessment Tests

High-stakes assessment testing is a big deal, for both students and the industry. Nationwide, teachers and students know the stress of the increasingly important state educational assessments. Here in Massachusetts, its the MCAS. These tests are long and complicated, and because they have been traditionally delivered via paper, inflexible in design and delivery. A new industry is evolving to conduct “e-assessments.” For a recent project, I had the opportunity to analyze a number of these products. Two of the main players in the electronic assessment space are Smarter Balanced (SBAC) and Partnership for Assessment of Readiness for College and Careers (PARCC).

SBAC

Smarter Balanced Screenshot

 The objective is to convert every student assessment to an electronic one, delivered via computer. According to Wikipedia, here are the advantages. “E-assessment is becoming widely used. It has many advantages over traditional (paper-based) assessment. The advantages include:

  1. Lower long-term costs

  2. Instant feedback to students

  3. Greater flexibility with respect to location and timing

  4. Improved reliability (machine marking is much more reliable than human marking)

  5. Improved impartiality (machine marking does not ‘know’ the students so does not favour nor make allowances for minor errors)

  6. Greater storage efficiency – tens of thousands of answer scripts can be stored on a server compared to the physical space required for paper scripts

  7. Enhanced question styles which incorporate interactivity and multimedia.”

During my research, I have discovered that some of companies creating these tests have little experience developing software applications, their backgrounds are in test design or courseware. The assessment application designers follow few standards or other conventions that would be familiar to children taking the tests. The assessments are […]

The stupidest design elements in Bootstrap

Why does the Success, Info, Warning and Danger buttons persist? It is one of the stupidest design elements in Bootstrap.
Bootstrap Buttons
Name 1 use case where you want your buttons to indicate Success, Info, Warning or Danger. And which way does that work: 1) press it and you get danger or 2) press it and then the system messes up and comes back turns the button to danger?
Semantically, there is no danger on a software application. Danger and caution signs are meant for physical harm. The appropriate red mark is error or wrong.

Top 3 Technology Combinations for Interaction Design

Top 3 Technology Combinations for Interaction Design

As an interaction designer, I am fascinated by technologies that can be brought together to improve a person’s overall experience. In recent years there are several combinations of technologies that really seem to have potential to improve and simplify the way we interact in the world. Here are 3 technology combinations that interest me.

1) Activity Monitoring and Motivation tools

Nike’s Nike+ Fuelband, Nike+ Training,  Nike+ SportWatch GPS, and Nike+ Kinect Training

Keeping and improving your health is a challenge in this sedentary world. Helping people be healthier, helping them get better from sickness or surgery is difficult. As adults we develop all sorts of habits. Learning new things really is not our problem. Unlearning old behaviors is the issue.

Nike has created an interconnected environment loosely coupled together with Nike Fuel. Fuel is Nike’s way of determining the amount of movement you have done. Using Fuel, GPS information, training programs, phone apps and peer pressure they are exploring all sorts of ways to get individuals to exercise or move more.

With Nike+ Kinect Training they can create personalized training programs that monitor your performance, work on range of motion and provide on the spot feedback with avatars of Nike trainers. Using a game like environment with visuals, sounds and encouragement they look to have the Kinect immersive experience be your motivation.

By using the Nike+ Fuelband, Watch or Shoes in combination with the apps and website, Nike looks to provide motivation by monitoring your activity and providing useful displays and awards. Since the information is updated regularly, they also try to get you to pull in your network to create peer pressure to motivate.

I have several doctor friends that see a future with similar […]

Flat design does not mean No design

Flat design does not mean it is acceptable to leave out key aspects of good design. I am encountering many designs that are trying to minimize the number of visuals on the screen in an attempt to make a flat design. In the process the design are missing all of the affordances the user interface needs in order to let the user know what they can click on. Just leaving the screen to hover overs with text and cursor changes alters the user experience from a process of getting the task done to figuring out what can be done.

Why are we making people guess? When we go to your website , unless it is a puzzle site, we are not interested in figuring out your mental model of the world. Make it explicit. Make all clickable items have the same visual indicator, say, the color or a line. I am sure you can come up with something.

Here is the latest example I encountered shopping for a new printer. I just clicked the checkboxes to compare 3 printers then scrolled up and down the page 3 times to find the compare button. I was beginning to think that it would happen auto-magically and perhaps my connection was slow.

Staple Flat UI

So take a good look at this image. What is clickable? The red and light blue things right? Yes of course and most of the greyed out text is also clickable. You should have known. Now scroll up and down the page quickly to find what you want. Where is the Compare button?

Why create a visual language that makes people guess? Make the affordances explicit […]

SharePoint leaves me a bloody mess

SharePoint is difficult. It is hard to use, confusing to set up and inconsistent. Now that I am done telling you what you already know, let me walk you through an inconsistency.

Recently I was working at a client site. They asked me to post my documents on Microsoft’s SharePoint so that everyone in the company can have access to the files. After hours of looking through all of the webparts, apps and what not that they jam into SharePoint I did not feel that I got very far providing access to all the documentation.

I soon found that it was not only the gross functionality that was all over the place but also the overall visuals combined with the basic interactions. Here is a walk-through of one page only looking at the hover-over actions and visuals. There are very few things on the page that do the same thing.

Visual affordance is key to knowing what to do. Guess what is clickable and what you expect it to do.

Office365 logo:

  • Cursor is a finger,
  • tooltip and
  • a footer URL

Sharepoint Office365 Logo

 How about the other white on red text such as “Outlook”?

  • Cursor is a finger and
  • the background goes lighter.

Sharepoint Outlook Tab

 And the toolbar changes to grey for the logged in user. It is a droplist.

  • Cursor is a finger,
  • tooltip,
  • the foreground gets darker and
  • the background gets lighter.
  • Droplist does not open.

Sharepoint Logged In User

Oh so the other 2 buttons: gears and the help “?” act the same way, right?

  • Cursor is a finger,
  • tooltip,
  • the foreground gets darker and
  • nothing happens to the background.
  • Share, Follow, Synch and Expand icon act the same way.

Why […]

Mobile first or workflow first?

Mobile first was suggested as a means to help an organization build both for mobile devices as well as the desktop application. The attempts at taking fully featured applications and wedging them into the mobile device did not work. Trying to take something with few constraints and simplifying to something with greater constraints seldom works. In this case the addition of unique features and abilities were missed on many developing mobile applications.

So mobile first arose as a way to build out applications considering the greater constraints of the mobile applications and then expanding to the desktop. This process all works well when the intent is to give the same features in both applications. However, when do you ever want the least common denominator between 2 technologies?

How does this work in real life? Are we designing to the workflows the users do? Or are we designing to the silos we build in the organization? We make the desktop apps in the desktop team and the mobile apps with the mobile team. This means that we hire UX designers for mobile or desktop applications but we are not hiring them to solve the user’s problems.

When you are at work, are you using mobile devices? Do you use them in exactly the same way as the desktop application? Do they serve different purposes depending on the tasks you are working on?

By analyzing the user’s workflows and how they do work we can do a better job designing for them. Incorporating the tools they use in the context of the work and environment will drive differing designs for each device. The strengths of the device in the context of their work can be enhanced. For example, at the desktop, many […]

Being honest with your designs

Where is the line drawn between being dishonest and trying to bridge the gap between the physical world and the digital world? Where is decoration useful? Where does decoration help the user understand how to interact with the application? When is “flat” too little and “skeuomorphic” too much for the user to figure out how to get his work done?

So, contrary to what the detractors say—there is a place for decoration, and a place for material honesty. These two exist on a continuum, with decoration at one end and material honesty at the other. There’s no precise point at which a design becomes honest or dishonest. The web designer has the messy job of sorting it out.

Material Honesty on the Web by Kevin Goldman

Product Designer Impact

I have been working in enterprise software companies for the last 13 years. I started off working on a team of 4 designers for 300 developers and QA. This meant that I was working on 8 to 10 project teams at a time. If I just went to stand ups it would consume 2.5 hours per day of my time. After 5 years of working like that all we were able to do is create marginal improvements and keep the train from going off the tracks. I consider that experience a failure and so did my manager who decided to announce to the engineering VPs, infront of the lead UI architect and myself who were leading the charge, that the UI team sucked.

Peter Merholz describes this situation in his current post.

Supply and demand of digital product designers

There is a paradoxical risk when designers are in such demand. The demand reflects the value that is seen in design work. But, with such demand, most organizations have too few designers given what they’re trying to deliver. That means those designers are spread too thin, and are focused on execution that keeps the light on. Which means design isn’t being used to its fullest extent, driving not just execution, but product strategy and definition.

Because designers are seen as so valuable, they are not able to deliver their ultimate value. – Peter Merholz

I think that I have learned something that helps address this problem. Currently, my team and I work with the product owners and managers outside of the product teams. There are 28+ product teams. We identify the key problems to work on from the 5 directors of […]