- We can build consistently and focus on workflows and logic, not web forms and list items
- We can reuse code instead of roping in a developer
- We can maintain our code by seeing our patterns in one place, define elements in our application, and keep redundancy to a minimum
What Federico points out is that a ship, a building, and a car are merely collections of components. Components are manageable and flexible. So long as the components join together seamlessly in the end, modularizing the pieces translates to flexibility, speed, and paradoxically both independence and collaboration.
“I began to think in terms of “designing software for mass manufacture.”
“The end result is a system—a system of individual and interchangeable parts that start at the smallest possible level and grows from there. Components are then assembled from these individual parts, and these components make up some of the core parts of our app. Once a group of components are assembled, we get a fully functioning page inside our application that is consistent in design and architecture with the other pages of our app—all because the pages share the same architecture.”
Architecting a Pattern Library by Federico Holgado
10 major search design patterns:
- Best (results) first: Relevance, Date, Popularity, Format, Personalisation, Diversity
- Federated search (simultaneous search of different databases)
- Faceted navigation
- Advanced search
- Structured results
- Actionable results
- Unified discovery
Morville and Callender (2010). p: 81-130
In Pattern Recognition, William Gibson defined apophenia as ‘the sponntaneous perception of connections and meaningfulness in unrelated things.’
- Drilldown To let the user locate an item within a hierarchy, provide a dynamic drilldown.
- Microcontent Compose the page of “Microcontent” blocks – small chunks of content that can be edited in-page.
- Microlink Provide Microlinks that open up new content on the existing page rather than loading a new page.
- Popup Support quick tasks and lookups with transient Popups, blocks of content that appear “in front of” the standard content.
- Portlet Isolated blocks of content with independent conversational state.
- Live Command-Line In command-line interfaces, monitor the command being composed and dynamically modifying the interface to support the interaction.
- Live Form Validate and modify a form throughout the entire interaction, instead of waiting for an explicit submission.
- Live Search As the user refines their search query, continuously show all valid results.
- Data Grid Report on some data in a rich table, and support common querying functions.
- Progress Indicator Hint that processing is occurring.
- Rich Text Editor e.g. http://dojotoolkit.org/docs/rich_text.html
- Slider Provide a Slider to let the user choose a value within a range.
- Suggestion Suggest words or phrases which are likely to complete what the user’s typing.
- Drag-And-Drop Provide a drag-and-drop mechanism to let users directly rearrange elements around the page.
- Sprite Augment the display with “sprites”: small, flexible, blocks of content.
- Status Area Include a read-only status area to report on current and past activity.
- Virtual Workspace Provide a browser-side view into a server-side workspace, allowing users to navigate the entire workspace as if it were held locally.
- One-Second Spotlight When a page element undergoes a value change or some other significant event, dynamically manipulate its brightness for a second or so.Responded
- One-Second Mutation When a page element undergoes a value change or some other significant event, dynamically mutate its shape for a second or so.
- One-Second Motion Incrementally move an element from point-to-point, or temporarily displace it, to communicate an event has occurred.
- Blinkieblinkpattern When an element is blinking
- Highlight Highlight elements by rendering them in a consistent, attention-grabbing, format.
- Lazy Registration Accumulate bits of information about the user as they interact, with formal registration occurring later on.
- Direct Login Authenticate the user with an XMLHttpRequest Call instead of form-based submission, hashing in the browser for improved security.
- Host-Proof Hosting Server-side data is stored in encrypted form for increased security, with the browser decrypting it on the fly.
- Timeout Implement a timeout mechanism to track which clients are currently active.
- Heartbeat Have the browser periodically upload heartbeat messages to indicate the application is still loaded in the browser and the user is still active.
- Autosave Autosave un-validated forms to a staging table on the server to avoid users losing their work when their session expires if they get called away from their desk while filling out a long form.
- Unique URLs Use a URL-based scheme or write distinct URLs whenever the input will cause a fresh new browser state, one that does not depend on previous interaction.
From Ajaxpatterns.org Some of the items/links in the original source have been removed, this is the list as copied on April 14, 2010
Principle one: Make it direct
In Page Edit
- Single Field Inline Edit
- Multi Field Inline Edit
- Overlay Edit
- Table Edit
- Group Edit
- Module Configuration
Drag and Drop
- Drag and Drop Module
- Drag and Drop Object
- Drag and Drop Action
- Drag and Drop Collection
- The Challenges of Drag and Drop
- Toggle Selection
- Collected Selection
- Object Selection
- Hybrid Selection
Principle 2: Keep It Lightweight
- Fitt’s Law
- Contextual Tools
- Always Visible Tools
- Hover-Reveal Tools
- Toggle Reveal Tools
- Multi Level Tools
- Secondary Menu
Principle 3: Stay on the Page
- Dialog Overlay
- Detail Overlay
- Input Overlay
- Dialog Inlay
- List Inlay
- Detail Inlay
- Inlay Versus Overlay?
- Virtual Scrolling
- Inline Paging
- Scrolled Paging: Carousel
- Virtual Panning
- Zoomable User Interface
- Paging versus Scrolling
- Interactive Single Page Process
- Inline Assistant Process
- Dialog Overlay Process
- Confirgurator Process
- Static Single Page Process
Principle 4: Provide an Invitation
- Call to Action Invitations
- Tour Invitation
- Hover Invitation
- Affordance Invitation
- Drag and Drop Invitation
- Inference Invitation
- More Content Invitation
- Brighten and Dim
- Self-Healing Fade
Purpose of Transitions
Principle 6: React Immediately
- Live Suggest
- Live Search
- Refining Search
- Live Preview
- Progressive Disclosure
- Progress Indicator
- Periodic Refresh
“The point is, it’s not productive to ask questions like ‘Do most people like pulldown menus?’ The right kind of question to ask is ‘Does this pulldown, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?”
From: Krug, S. (2006), Don’t Make Me Think: A Common Sense Approach to Web Usability, Berkeley, CA: New Riders, p.129