Designing Notification Icons for the User

I’ve recently been doing a lot of design work around notifications. This is an interesting area—trying to get the balance between what the user needs to see and what the system needs to show them. Alongside the standard info, success, warning & error notifications the project required an additional notification style for system messages. These are things like showing the user a message has been sent, or the system is loading information.

For things like info, this icon choice is fairly straightforward. Just doing a search for info icon - https://www.google.co.uk/search?q=info+icon - returns many results for the standard i in a container that is a fairly universal symbol for information.

Tourist Information Kiosk Tourist Information Kiosk

Tourist Information Signpost Tourist Information Signpost

Tourist Information Office Tourist Information Office

The same goes for the icons used for success or error - there’s a fairly well defined set of universal symbols used for these and it makes sense to use these to reduce cognitive load for the user.

But looking at the system notification we realised that no one icon really covered the potential variants, so the decision was made to dynamically add a relevant icon to denote the system process taking place, display a certain icon to denote the system saving an item and another one to denote the system sending a message.

But then I took a step back to consider this more - from the users perspective they see a constantly changing notification, it increases the effort they have to put in to understand what the notification is telling them. We were designing this notification based on what the Designers & Developers thought the user would want to see rather then what the user needed to see. From the users perspective, all they need to know is that the system is performing an action and if that action has succeeded or failed. This was the path we took, a single icon to denote system notifications to the user.

Don’t try to overthink UI, by avoiding dynamic notification icons in this area we made it easier for both the user to comprehend what is happening in the system and reduced development time and potential issues. In many cases, the simplest solution is the best.

User Interface 'Ageing'

A recent project involved the addition of a Feedback button across all pages of an enterprise system. This was to allow users to quickly & easily offer feedback & comments on any part of the system while remaining in their particular use flow. Any problems discovered could be highlighted to the development team with a simple button click which captured the reporters name, browser details, URL and their comment whilst not disrupting the user by having to stop what they are doing to report a problem or make a comment.

Making ‘New’ Features Stand Out

As a new feature I wanted this to stand out, to be noticed by people using the site who may experience UI ‘blindness’ and miss this important new functionality. To try and avoid this I designed the feedback UI to contrast with the system pages, to stand out and show off this new UI element to users.

Feedback Button UI Element Feedback Button UI Element

And this worked well, perhaps too well, many of the early comments were how distracting this new feedback UI was but seeing as this was submitted using the new feedback system it did point towards its discoverability and intuitiveness.

‘Ageing’ the UI

However, once this initial highlighting had been in place, and generally users were made aware of this new feature and started to use it, the plan was always to rein the design in, have it sit more naturally within the rest of the system UI once users knew how to use the feedback system and offer comments.

To do this, I designed a range of styles to allow the feedback UI to naturally ‘age’ over time, to blend in more-and-more with the system UI.

Ageing Feedback Button UI Element ‘Ageing’ Feedback Button UI Element

This is my first experiment at ‘ageing’ a UI in this manner so it will be interesting to see the results in naturally blending the interface over time.

Potential Issues

I’m unsure how this process will affect new users to the system, will they be able to as easily identify the ‘feedback’ UI compared to those who have seen it ‘age’ over time? One way around this would be to base the styling on longevity of use—new user would see the original, more striking UI which over time would normalise to the default one seen by longer-term users.

Conclusion

If this proves to be a successful UI change within the system it would be interesting to consider other areas where this ageing/graceful UI degradation might be useful.

Minimum Viable Writing

For quite a while now I’ve wanted to do more writing up of the work I’m doing and general thoughts I have on UX, interface design, typography & whatever else interests me at a given time.

Pen & Paper

I’ve worked through quite a few systems including Wordpress, Blogger, Textpattern but not found a system I felt really fitted in with how I’d like to work. I find myself getting hung up on the design, or plugins for including feeds or ads.

Minimum Viable Product Writing

The idea of creating a Minimum Viable Product is one that resonates with me as a UI designer. Working from sketches through to a finished product via various stages of fidelity has proved to be a technique that works for me. It made sense then to try this approach with my writing.

This new platform has been set up using Github Pages and (initially, but no longer) Tinypress. The articles are written using Markdown and hosted via Github https://github.com/whitingx/whitingx.github.io allowing others to make pull requests to suggest edits, ammend typos or suggest ideas for discussion. This even opens up the chance for me to have guest editors - got an idea for an article? Just let me know - https://github.com/whitingx/whitingx.github.io/issues.

I’ve been thinking a lot on ownership of content recently - useful as things like Medium are I do worry about sites, and subsequently links, disappearing (something spoken & written about in great detail by Jeremy Keith - https://adactio.com/articles/9004). The same with technology - I used to use Textpattern for writing up articles and, while it’s still around, it’s not looking like a platform with a future. I could see a similar fate with things like Wordpress and, as such, I’m trying to become less platform dependant.

I’m using Github Pages as free hosting for ElectronicPress but the underlying technology, Jekyll, Markdown, Git, are all open source making it (hopefully) easier to move in future if required while maintaining content, links, images, comments, etc.

I’m also hoping to become a better writer as part of this. I’m always keen to point out the benefits of having good copy and the useful tools available to improve writing on the web but this is an area I’m looking to get better at. Github Pages also helps with this as it versions the content. It gives me the chance to go back and easily edit previous articles as I improve my writing craft while also retaining the previous versions for me to refer, or roll back too.

The Future

I’m not sure how this will work out, but I do know I want to write up the work I’m doing, the ideas I have, etc. just for my own reference—and if this proves useful to others, all the better.

I’m planning to start with this Minimum Viable Writing platform and then expand it over time, adding comments, sorting out category pages, pulling in other useful info and I’d be really interested in any ideas other might have - https://github.com/whitingx/whitingx.github.io/issues.

La Mer de Pianos

This has been one of my favourite Vimeo films since first seeing it a few years back. A poignant look at a declining trade.

“I’m searching for a sound that doesn’t exist. I dream of one day making an instrument with a single string which will sound a bit like a lute, harp and a piano all at once but with just one string, the purity of one single string.

La Mer de Pianos from Wriggles & Robins on Vimeo.

Short film about Marc Manceaux, the owner of the oldest piano shop in Paris.

Shot, produced and directed by Tom Wrigglesworth & Mathieu Cuvelier
www.wrigglesandrobins.com
www.mathieucuv.com

Graded by Luke Morrison at The Mill
Mixed by Jeff Smith at 750mph

Special thanks to Clare Sullivan at 750mph

Digital Hoarding - Community Comments

I help run a UX community on Slack. We have ~5000 members but make use of the free tier. This means that the community has a 10,000 message limit in place, once we reached that 10,000 anything new added pushes out one of the older posts.

Useful comments, useful links, jokes, insights, detailed explainations and in-depth analysis all lost like

Tears in the rain

The other Admins and I had a few discussions on this, how were we to keep this useful info, how could we capture it before Slack removed it and add it somewhere useful. We talked of archiving systems, Pinterest, moving to another system without the message limitations.

But then, in the course of these discussions, we had a thought—perhaps we don’t need to keep everything. Digital moves fast, what was gospel 6 months ago can be discredited in an instant so that

Nobody does it that way anymore.

What do we achieve by keeping a record of these old links? With ~5000 UX professionals as part of the community we have an ideal up-to-date crowdsourcing system. People do ask the same questions as they can’t always see what has been asked and people do give the same answers for the same reasons - but - this ensures that the questions & the answers provided are always the most relevant, the most well thought out, in-the-moment resources.

Storage is cheap these days but it’s worth thinking about why to archive information, why to keep resources - just because we can doesn’t always mean we should.