UX Lead with a passion for all things UX, IA, Product Design, and Music

Blog

Firefox notification add-on update

I felt that mocking up something more visual than wireframes would help to get feedback from a wider audience. For our prototype we will stick to a very minimal visual design.

 The first mock-up is quite minimal and text-focused.

The second mock-up both uses the dominant color in the favicon/source icon to better visually differentiate the source content. It also shows how we could use content from sources like LastFM and Linked in and potentially use the visual assets offered for different post types. You can see a music event recommendation, message from a LastFM friend, or notice from a LinkedIn group.

 As I mentioned, the colors used in the second version are taken from the dominant color of the favicon (or if we have a default icon for common social sites). Chrome does this in their home tab. Etsy and Dribbble also use this method for searching by color. Example:  http://lokeshdhakar.com/

We have also set a few requirements to keep the prototype simple as we test with a few content source types. As we gauge the volume of content displayed and expectations for viewing this content, we may need to revisit these rules once again.

 Our take on the prototype is that this is timely content. This is not a service like Delicious or Evernote where you keep links that you want to revisit. If we offer an archive, this becomes a different kind of tool than intended. For now, we have set the following to keep the “what you see and when” logic simple:

1. Items shown are from within the past 24 hours.

2. Maximum height of panel extends to height of browser. (not demonstrated in visual design) After which, a scroll bar is displayed. Edgecase: If the user has (i.e.) 50 items to be shown from 10 sources, we should consider a rule to show x items from each source with a “x more” indicator to expand all. It is important that the user can see as many sources as possible and the most recent items from these sources. The user shouldn’t have to scroll excessively to see hidden sources in the bottom of the panel.

2. Delete item from view when it is ‘read’. ‘Read’ is defined by the user clicking on link/button within item.

3. User explicitly deletes single item from view by clicking the ‘X’ icon. (“Are you sure?” verification not needed for single item)

4. User explicitly deletes all items from a source by clicking the ‘X’ icon. (“Are you sure? This will delete all items from this source” verification needed)

5. If an item has not been seen since panel was last expanded, it can have a 5% opacity background of the dominant hue. (as shown in attached screenshot of more colorful mock-up)