My thoughts on programming, visualization, geographical information systems (GIS), human-computer interaction, and more.
This article describes a COBOL compiler and run-time interpreter for teaching COBOL in a computer-aided learning environment. The compiler converts COBOL source code into an intermediate pseudo code that is executed by the run-time interpreter. This package is the first implementation of COBOL written in BASIC for an unexpanded BBC Micro with a 32K memory.
This article introduces a new conceptual model for automated teller machines called the personal bank teller. The disadvantage of the conceptual model users have of current automated teller machines is of an inflexible mechanical replacement for a bank teller. The personal bank teller aims to personalize automated teller machines by controlling the options that are offered and the order in which they are displayed, and by insulating the user from the differences between domestic and international automated teller machines. Design considerations for an implementation of personal bank tellers are discussed.
This article describes an algorithm for laying out a list of items diagonally in a square, or nearly square, matrix. The algorithm provides a method for compactly arranging sorted items using proximity and has been used to visualize document similarity data. A Java implementation of the algorithm is presented.
This article describes an algorithm for labelling features in interactive applications such as data visualization. In the first phase, a genetic algorithm searches for a set of label positions that minimizes the number of labels that overlap features, other labels, or the bounding box of the region to be labelled. The genetic search has a time limit to ensure that interactive software that uses the algorithm is responsive. If there are any overlapping pixels after the genetic search, the second phase of the algorithm makes small adjustments to the position of the overlapping labels to remove the overlaps.
This article provides a glossary of terms used in image processing, the field of computer science that develops techniques for enhancing digital images to make them more enjoyable to look at, and easier to analyze by computers as well as humans.
This article describes a Java class framework for describing application parameters of commonly occurring data types. The framework can automatically construct user interface components for each type of parameter enabling users to view and edit parameter values. Parameters can be grouped into sets and the framework can automatically generate the user interface of a parameter set which contains the user interface component of each parameter in the set.
This article describes the interaction design of my kitchen timer. The designers have paid attention to how the timer will be used as well as to how it works, and despite ignoring the conventional wisdom that eschews modal interfaces-the timer has several modes and overloads every button-the interaction is natural and easy to use.
This article describes a Java framework for collecting and processing input from five types of input source: files on the local machine, files on the web, copy and paste and drag and drop operations, and programmatic input. The framework distills the five input sources into a generic Reader object from which the input is read and processed by a data source processor, an abstraction of data processing functionality such as parsing and data analysis.
Users sometimes need to enter invalid values or values they are not sure of. Flexible input controls allow invalid data values to be entered, they enable values that the user is not sure of to be marked as such, and enable the user to make explanatory annotations. This article describes a storage technique for relational databases that bridges the gap between the invalid and uncertain values used by flexible input controls and the strict data integrity and validation rules required by relational databases.
This articles introduces a Ruby plugin I developed to embed responsive YouTube videos in Jekyll static websites using Bootstrap. Responsive videos automatically adjust their dimensions to fit the HTML element in which they are embedded, even when the size of that element changes, while always maintaining their aspect ratio.
This article describes a method for automatically identifying whether a data set is composed of categorical values. This enables applications to make use of such data without requiring users to supply this information.
User interfaces often require users to select an item from a list of alphabetical items. The value to be selected might be known in advance, or browsing might be necessary to pick out the correct item. This article describes a method of selecting alphabetical list items that reduces the number of keystrokes and hand movements from keyboard to mouse.
This article presents the results of an analysis of the 17,327 street names in four U.K. cities: Cambridge, Cardiff, Edinburgh and Oxford. These results can inform the implementers of indexing and filtering algorithms for applications that require the input of street names with the keyboard or by selection with the mouse from a list.
This article evaluates how well modern computer-based writing tools support the writing process. The writing tasks that need to be supported by tools are identified and a set of criteria for tools to support writers is developed. Current writing tools are then evaluated against this criteria to determine how well they suppose writers. The article concludes by examining the implications for the design of new software to support writers.
The localizable resources of Java applications are stored in Java ResourceBundle objects. Hand-coding a ResourceBundle class can be difficult and time consuming, especially for non-textual resources. This article describes an XML language that simplifies the task of describing textual and byte-encoded resources, such as icons and audio clips, and enables the source code for the corresponding ResourceBundle class to be generated automatically.
Interface agents are semi-autonomous software entities that perform tasks on behalf of their users. One of the attributes an agent may possess is anthropomorphism. Could an anthropomorphic agent make people believe information that was not true? This article describes an experiment that investigated the effect the source of information (person or computer) had on whether people believed it.
Agents are semi-autonomous software entities that perform tasks on behalf of their users. One of the attributes an agent may possess is anthropomorphism-the projection of human characteristics onto non-human or inanimate objects. As anthropomorphic agents become more common we need to consider what impact they will have on their human users. I put forward a for and against argument drawn from the current literature on anthropomorphism and then look to the future of anthropomorphic agents.
Some time ago I read a newspaper article about a tragedy that occurred in a nursing home. Four elderly residents died after drinking diluted dishwasher cleaning fluid rather than the intended blackcurrant cordial drink. This story stuck in my mind not only because it was a tragedy for the residents, their families, and the staff of the nursing home, but also because it is characteristic of so many accidents: a sequence of unintended events pave the road to disaster.
This article describes a new idiom for changing font size with direct manipulation. An extension to the idiom is also described that provides a mini toolbar for changing other font characteristics, including font name and styles such as bold, italic and underline.
Although digital devices have many benefits over their analogue predecessors, their one main drawback is their lack of dials as input devices. This article looks at the benefits of dials as input devices.
This article describes a double-ended bar chart that compactly visualizes two numeric values in a single table cell. Visualizing a column of values with double-ended bar charts makes it easy to see trends and outliers in the data.
Event accumulators capture two or more events that occur within a specified maximum amount of time of each other, and combine them into a composite event that is dispatched to interested clients. Event accumulators can be used to overcome the event dispatching limitations of some user interface components.
This article compares the usability of physical on/off swtiches with the user interface for shutting down a computer.
The design of the clipboard used by graphical user interfaces often confuses users because the data that has been copied onto the clipboard is not visible. This article introduces the visible clipboard, a new idiom for copying and moving data that displays the data on the clipboard while it is being copied or moved.
Back in 2001, Donald Norman highlighted the failures of DVD menu design. Much research on DVD menu design has been done since then. Unfortunately, DVD subtitle usability doesn't seem to have received the same attention.
Partition labels provide a user interface for displaying and interacting with groups of partitioned data. Partition labels enable users to select the items in a partition, transfer the selected items in a drag and drop operation, and change the colour of the partition.
Designing a user interface for capturing credit card expiry dates is an interesting, multifaceted problem. This article works though this problem and analyses some solutions.
Drop buttons provide a compact user interface for accepting input from a variety of input sources. Pushing the button pastes data copied onto the clipboard into an application. Dropping data onto the button's label transfers data into an application with a drag and drop operation. Right-clicking the button displays a drop down menu that enables users to invoke file selection and WebChooser dialogs to select files located on the local machine and on the web.
Selection iterators traverse the elements in aggregate data structures such as lists, maps, and trees, and return only those elements that meet a particular criteria. The element selection criteria is encapsulated in a selection object which separates the decision to return an element from the order in which that decision is made. Selection iterators promote cleaner iteration loop code by moving the test for the required elements into the iterator.
Web pages can be viewed at different levels of detail depending on how much information is required. This article describes six levels of detail and explains how they can be used to implement three browser enhancements: enhanced link tool tips, navigation maps, and pre-emptive page downloading.
This article discusses why interactions driven by cash registers reduce the customer experience.
Graphical user interfaces provide input controls that constrain input values to meet database integrity and validation rules. Sometimes, however, users need to enter data temporarily that is known to be invalid or not completely accurate. Current software is inflexible because it prevents invalid and uncertain values to be entered temporarily. This article describes flexible input controls, a new idiom that enables user interfaces to be more humane by acknowledging that users need to use invalid and uncertain values. Flexible input controls allow users to enter invalid values, to mark uncertain values, and to attach explanatory annotations to such values.
From its inception, Google's search interface has been praised for its simplicity. However, simplicity is not a replacement for clarity, which is the most important attribute of a user interface. I don't know if I've ever misunderstood a user interface control as much as I misunderstood Google's I'm Feeling Lucky button.
This article discusses some ideas to improve the user experience of moving between iOS apps.
Harry Beck's map of the London Underground is one of those rare designs: functional, beautiful and difficult to improve. This article looks at Beck's iconic map of the Tube, which is now seventy-five years old.
iCloud Drive is available as a folder in the Finder on macOS Yosemite (10.10) and later. However, iCloud Drive doesn't act like a normal Finder folder, which is problematic when you want to work with iCloud Drive in the Terminal app. This article explains how to access your iCloud Drive folder in the terminal.
This article explains how to make macOS automatically add the file extension when it saves screenshots.
When working with geographical data it's often useful to convert between the longitude and latitude coordinate system and the easting and northing co-ordinate system, which is used by the UK's Ordnance Survey. This article explains how to perform these convserions in Java with Jcoord.
In this article, I'll explain how to implement the structure and lifecycle of control and layer plugins for the Leaflet JavaScript mapping library.
When creating my Add-on Stats dashboard widget, I couldn't find an online tutorial for creating a widget bar icon. Apple's Designing Widgets page lists some basic information about the dimensions of the icon's contents and the size and orientation of the icon's drop shadow, but nothing about the dimensions of the icon itself or how to create the curved glass effect used by most other icons on the widget bar. After some trial and error, I developed the following tutorial for creating widget bar icons.
This article describes the method I used to get better results from optical character recognition (OCR) software when scanning a report printed on a dot-matrix printer.
When headings marked-up with the h1, h2, ... h6 HTML tags are too long to fit on a single line, web browsers wrap the trailing words onto the next line. When the second line of the heading contains two or more words, this layout looks fine. However, when the second line contains just a single word, this layout is ugly-to my eye at least.
This article explains why you should avoid using the version of Ruby bundled with macOS and should instead install your own version of Ruby with RVM, the Ruby Version Manager.
OmniGraffle is a superb piece of vector-diagram drawing software. It's easy to create complex, multi-layered diagrams very quickly in OmniGraffle. However, it did take me a while to work out how to produce curved line joints that connect objects. I'll show you how to do it in this article.
This article explains how to use D3 to perform a set of tasks asynchronously and wait until those tasks have been completed before performing another task.
This article explains how to zoom and center a Leaflet JavaScript map on a single marker.
This article describes the Python implementation of a set of commands that integrate the Songza jukebox website and the Enso command line system.
In this article I'll teach you a technique I use when programming that will make your code read more like English. Instead of writing comments that describe what a method does, you express those comments in the way you name your methods and in the way you compose your method calls.
The goal of information retrieval systems is to maximize the number of relevant documents returned for each query. Keyword IR systems often return irrelevant documents because matching keywords is imprecise. Precision can be improved by matching concepts, keywords for which the intended meaning is known. This article describes the algorithms and data structures needed to implement a concept IR system, how concepts can be used to enhance keyword queries, and describes a prototype user interface for a concept IR system.
Storing string representations of primitive data type values uses more memory than storing them as primitive data type values. Adaptive data storage structures minimize storage by determining which primitive data type is represented by a string, converting it into a value of that type, and storing it in the most appropriate object wrapper. Identifying the type of each value at storage time enables fast and efficient identification of objects of different classes when performing tasks such as searching, comparisons, and calculations.
This article provides a nice example of how feedback is used to teach users how the London underground barriers work.
This article describes how a record of the actions taken with a user interface can be used to personalize it to individual users. The user interface of an Automated Teller Machine is used to show how transaction data stored on a smart card can be used to personalize the order of the options.
A link label is a Java Swing component that provides hyperlink functionality for Java applications. Link labels display a hyperlink and generate an event when the cursor is moved on and off the hyperlink and when the mouse is clicked over it. Interested clients listen for link label events to enable them to invoke application dependent hyperlink behavior.
In The Myth of the Paperless Office, Abigail Sellen and Richard Harper explore why paper use is increasing despite the predictions of its demise at the hands of the electronic office. One key advantage of paper documents over electronic documents is the way paper documents enable us to deal with corrupted or missing pages.
Hiding the underlying complexity of an operating system usually produces a better user experience. This article provides a counter example from macOS that demonstrates that shielding users by using friendler terminology can be confusing.
As hyperlink-style web interfaces become more common in desktop applications, developers must take care not to throw away the familiar semantics of GUI controls such as buttons. This article provides an example from Firefox where replacing buttons with hyperlinks removes the perceived safety net of cancellable operations.
Progress bars provide visual feedback on the progress of lengthy tasks, such as reading a stream of bytes stored in a file. In some cases, Java progress monitors cannot be used because the number of remaining bytes is not available from the InputStream object. This article introduces the SizeInputStream class that monitors reading progress when the number of bytes to be read can be determined from sources other than an InputStream object, such as from a URLConnection object.
Applications often need to monitor the state of the environment in which they run. Monitor threads provide a framework for monitoring changes in the status of part of a system that cannot be monitored by listening for events.
The progress bars that visualize the progress of tasks that write data to CDs and DVDs are often overloaded with information and lack a visual correspondence with the circular media they represent. This article introduces progress discs, a new user interface more suited to monitoring the progress of optical-media tasks.
Researchers and students need information retrieval tools that will support them in their work. To provide effective support, such tools must be able to track changing interests and automatically suggest new, possibly unrelated, information that might be helpful. This article describes an approach to representing a user interest profile using a genetic algorithm, a form of evolutionary model. The profile is maintained with user feedback and genetic operators and initial testing with a database of academic journal abstracts has found this to be a promising technique.
Interactive controls should produce an accurate mental model in their users about what the control does through clear labelling. This article demonstrates that breaking this rule makes it difficult for users to understand the effects of changing the value of a control.
Well-written error messages inform users about the steps they should take next. In contrast, poorly-written error messages simply report the internal state of the application in the hope that users will understand the problem and be able to correct it. However, detecting that an error has occurred and presenting some information to users is far better than simply crashing.
Interactive applications use progress bars to provide users with feedback on the progress of lengthy tasks such as downloading large files. Current graphical user interface toolkits pop up a window with the progress bar; as the operation progresses, the length of the bar increases from left to right to indicate how much of the task has been completed, and to enable users to estimate how much longer the task will take. When the task is complete, the application closes the window containing the progress bar and opens the window containing the content. But there's a problem.
This article describes the design, prototyping and evaluation of a user interface for the Electronic Learning Facilitator, an intelligent assistant for researchers browsing the ISLE Object Store. After outlining an initial user interface based on a filing cabinet metaphor, this article describes a prototype user interface inspired by the SuperBook structured browsing and retrieval system.
In their recent New York Times article, Matt Richtel and Ashlee Vance cite the impatience of contemporary computer users as the force driving manufacturers to reduce the boot-up times of their PCs. Making users wait for their PC to boot up has always been a heinous usability crime so this problem cannot be solved soon enough.
Downloading a web page can produce many HTTP requests. An HTTP request is made for the HTML of the web page itself and a subsequent request is made for each image, audio clip, and other multimedia content referenced in the HTML. This article describes a method of packaging multiple HTTP requests into a single request to reduce Internet traffic. The trade-off is that web servers that service multiple HTTP request packages must package the requested content before delivery to web browsers which must then unpack the content.
Users often experience a delay between clicking on a link to request a web page and the presentation of the page in the browser. This article describes web page pre-emption, a browser-based method of decreasing the download delays perceived by users, and presents five strategies for selecting which pages to pre-emptively download.
This article reviews the problems with current visualization software and develops four groups of requirements for visualization software: hardware and software requirements, user requirements, visualization researcher requirements, and visualization developer requirements. I believe that meeting these requirements will produce visualization software that will be effective, flexible, highly usable, and fast and easy to implement.
This article describes the Document Visualizer, a prototype document visualization tool that supports the relevance evaluation of information retrieval results by presenting search terms and document similarities in four visual styles: bar charts, matrix charts, a scatter plot, and a document map. Users are able to explore the documents with dynamic queries and interactive sorting.
This article describes the Expanding Table, a tabular user interface component that enables table cells to expand and contract with smooth animation. The Expanding Table can be used for visualization and browsing applications, and when the user interface component for editing table cell values would make tables prohibitively large. An Expanding Calendar is provided as an example application.
Users develop their mental model of software from the user interface and past experience with similar software. Developers' generate their mental models from their familiarity with how the software works. This article discusses how the differences between these mental models can affect the usability of software.
This article shows how making a simple change to the usual interaction style of an elevator button can improve its usability.
One of the types of information that the Document and Code Knowledge Elicitation Toolset (DOCKET) project needs to capture are the hierarchies that exist in systems. This article describes the hierarchy editor tool developed to input hierarchical information into DOCKET. A hierarchy type definition system was developed to enable the generic hierarchy editor to be configured to edit different types of hierarchy.
The IxD Bookshop is a simple, uncluttered and easy-to-use website for buying the best books on interaction design, usability testing, human-computer interaction and human factors from Amazon.
This article describes the Space Filler Explorer, an application for navigating around hierarchical filing systems with three co-ordinated views: a directory tree structure, a list of files, and a 2D tree-map space-filling visualization of the files. Users can dynamically query the tree-map visualization to filter out files based on their size using several relational operators.
This article describes a new file selection dialog called WebChooser that enables users to select files that are published on web pages and FTP servers, as well as files stored on local machines. The WebChooser dialog also generalizes file selection to URL selection which increases the range of information that can be selected to include files, email addresses, newsgroups, and web queries.
Information such as a timetable is easy to scan when presented in a grid. This article discusses how search-based user interfaces can be improved by incorporating grids to support data exploration.
This article explains how to overcome some common reasons your code might be failing to connect to the Twitter API.
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 discrete step, even if they caused those changes. This article explains why you should use animation to help users notice changes in your user interface.
When visualizing geocoded data points on a map 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. This article explains how to use transparency to visualize information density.
Document maps are a new visualization tool that help users filter information retrieval search results. Documents are compactly represented by a square matrix that presents document similarity and frequently occurring search items. Evaluation has shown that document maps enable users to filter search results quickly and accurately.
In The Inmates Are Running The Asylum, Alan Cooper argues that embedding a computer into existing technology does not produce enhanced alarm clocks, cameras or cars, it produces a computer. Cooper's point is that embedded computers often make their presence felt too strongly in the user interfaces required to operate the new functions brought by those computers. I would add blu-ray players to Cooper's list. Why? Because blu-ray players act more like computers than DVD players.