This post introduces a plugin I developed to embed responsive YouTube videos in Jekyll websites. Jekyll is a static website generator that is extended with plugins written in Ruby. Responsive videos automatically adjust their dimensions to fit the HTML element in which they are embedded, even when the size of that element changes. Furthermore, the dimensions of responsive videos always maintain the aspect ratio.
Designing a user interface for capturing credit card expiry dates is an interesting, multifaceted problem. To work though this problem, we need to ask three questions:
- What default values should be used for the expiry date?
- What are the opportunities for users to make errors when transcribing the expiry date from the card to the user interface?
- How can we support data entry by reducing the cognitive load on users to help prevent errors?
This posts explains how to use transparency to visualise information density. When visualising geocoded data points on a map, for example, it’s common to plot each location with a marker. When many data points are located in the same geographical area, the markers drawn later will overlay the markers drawn earlier. When the markers are opaque, it’s difficult to tell at a glance how many data points are located in each region. The following example shows geocoded tweets authored about the Boston marathon.
This post explains why you should use animation to help users notice changes in your user interface. When interacting with software, users focus on the task they want to perform, not on the software itself. As a result, some users just don’t notice UI changes that occur in one descrete step, even if they caused those changes. For example, I’ve been at usability tests where users didn’t realise that a sidebar pane was opening or closing even when those users repeatedly clicked on the toggle button to open and close the pane.
It’s always nice to discover new functionality in interactive systems, especially when watching people use such systems in the wild. When travelling in an elevator, I recently saw a nice solution to the main problem with elevator user interfaces: how to deselect a mistakenly pressed floor button.
One of the best ways of teaching users how a software or physical product works is through feedback. Some types of feedback are explicit, such as a well-placed error message presented when we fill out an online form field incorrectly, or a supportive tick when we fill out the field correctly. Other types of feedback are implicit and require us to learn a connection between the feedback and the correct way to use an object or system. Regardless of type, the best feedback occurs naturally and at just the right time.
The quality of an application’s error messages comes under close scrutiny during an expert usability review. Well-written error messages inform users about the steps they should take next to move on with their task. Many poorly-written error messages simply report the internal state of the application in the unrealistic hope that users will understand the problem and therefore be able to correct it. However, detecting that an error has occurred and presenting some warning to users is far better than simply crashing.
As operating system and application quality improves, outright crashes happen less often. Unfortunately, applications do still crash without warning and these are the most challenging error scenarios to diagnose. I recently had to diagnose such a scenario when connecting the MySQL relational database with the SPSS statistical analysis package. SPSS was able to import data from every table except three. Importing data from these three tables caused SPSS to crash with no preceding error message. Even looking at the names of the columns in the table crashed SPSS.
Timetables are a familiar and, if well designed, easy-to-use way to find the times of regularly occurring events such as films, public transport and museum tours. The interaction is simple: the timetable presents the time of each event in a grid indexed horizontally and vertically by time and date. Timetables on paper work well because they enable us to browse the complete set of available information. We can see at a glance on which days a particular film is showing, the intervals between buses, or the time of the last museum tour of the day.
Timetables presented on websites often lose their power in the translation onto computer. Computerised timetables often begin not with browsing but with search. Search is a natural interface for any data set because it’s very easy to implement. However, search interfaces tend to be data-centred rather than user-centred. For example, websites that present bus timetables often focus on how the bus company thinks about buses, which is, naturally, in terms of bus routes. Passengers must select a route before being shown the timetable for the route. This model quickly breaks down when passengers are not familiar with the routes offered by the bus company.
Like most people, I prefer to read writing that is punchy, concise and easy-to-read. Also like most people, I found it hard to give my own writing the same snap. So one day I decided to learn the tricks that my favourite authors use to produce the kind of writing I love to read.
I spent many hours studying books full of advice for writers. In that time, I read hundreds of tips for better writing. I want to save you that time by sharing the seven editing tips that I found most effective. Because these editing tips made such a difference to my writing, I call them power edits.
Download Power Edit Your Writing for FREE
A long-standing design goal for iPhone apps is that they support a very specific style of interaction: users take out their device, open an app, perform a task quickly and then they’re done—either because they take an incoming call or because they pocket their device to get on with other things. To enable this get-in-get-out interaction style, every app must have a well-defined purpose. App developers are encouraged to implement only the functionality required to perform the purpose of their apps. This development style pares down apps to keep them focused and avoids featuritis.