The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!



UI Pattern Libraries for the Enterprise- What. Why. How & the Difference From a Style Guide

Status: Work in progress [what is this?]

What is a UI pattern?

If you break a website or application down from a user interface perspective, you will end up with a bunch of user interface components that are used again and again throughout it. A user interface pattern is called so because that pattern can be used repeatedly to solve a particular design problem.

Examples of UI patterns

  1. Accordion- An accordion can be used to display information when there are too many items to fit in a limited space without overwhelming the user.
  2. Step indicator- A step indicator is used in screen flows to inform users of the number of steps in multi-screen process.
  3. Progress indicator- A progress indicator is used to shows actual progress of a task being done by something or someone.

What is a UI pattern library?

A UI pattern library is a collection of user interface design patterns. The UI pattern library documents these UI patterns and defines how they should look, behave and often how they should be coded too. It can also provide specifications on templates, flows, and general heuristics.

How can a UI pattern library help an organization?

UI patterns help an organization ensure a consistent user experience across a suite of websites and applications- in terms of how they look and how they behave, application flow and pages layouts. The greater the number of applications, the greater its use.

The difference between a Style Guide and a UI Pattern Library

We will restrict the scope of a style guide to the online channel for this explanation and refer to it as the Web Style Guide. The real difference between a web style guide and a UI pattern library can be explained through what each of them specifically address, and thus their audience which governs the way they are structured.

Both strive for consistency in visual design and interaction covering interactive forms to typography. A style guide’s primary purpose is to ensure that branding is correctly applied to maintain the organizations identity across different websites and applications. On the other hand, A UI pattern library’s primary purpose is to present a set of solutions that address unique design problems. For example, how do you address session timeout frustration for users? How do you address application errors so users are not left disoriented and confused? How do you prevent users from accidentally exiting long forms if they’ve filled them half way through? Since these solutions address design problems, they can increase the efficiency of website and application development with increased usability.

Think of it as extending the value of a style guide rather than a replacement. The style guide’s primary audience is the designer who will refer to it to ensure that the visual design is correctly implemented. The UI pattern library’s audience is the Business analyst, developer and QA (Quality Assurance). Business Analysts and developers, with little or no help of the Usability team (depending upon the importance of the project, availability of usability resources and timelines) can use the style guide to work on the flow and user interface for an application. Even better, developers can pick code samples (HTML, CSS, Java script) to implement the UI pattern. Last but not the least, QA (Quality assurance/ testing team) can use it to verify the correctness of user interface implementation.

The structure of a UI pattern

A UI pattern can include the following sections:

1. Name of pattern

2. Example image

3. When to use it (description of the specific problem it addresses)

4. When not to use it

5. Similar UI patterns

6. Pattern success notes in different applications

7. Specifications (platform specific CSS, HTML, Java script)

8. Accessibility

9. Attachments (e.g.- icons accordion states)

Extending a Style Guide to a UI Pattern Library

A style guide can be extended by adding the categories from the structure above that are not a part of the style guide.

The UI pattern library as a web app rather than a document

The advantage of having a UI pattern library as a web app rather than a document is:

1. Lets you look at the UI patterns from different views. For example- organize by looking for a design problem. Organize alphabetically. Organize by layout section.

2. UI patterns should be updated, added and retired. A web app makes it easier to do so than a document.

Great Examples of UI pattern libraries

1. – A great example for a company specific UI pattern library

2. – A generic UI pattern library but with examples from only Yahoo properties.


A List of UI Components for a UI Pattern Library for Web Apps and Websites

  1. Accordion
  2. Vertical tabs
  3. Horizontal tabs
  4. Step indicator
  5. Horizontal navigation
  6. Horizontal navigation (Two level)
  7. Horizontal Mega dropdown menu
  8. Vertical navigation
  9. Vertical navigation (Two level)
  10. Links (with default, hover, on-click and visited states)
  11. Form components (with default, hover, focus, on-click states for controls)
    1. Name lookup
    2. Combo box
    3. Multi-select combo box
    4. Text box
    5. Form text value
    6. Label
    7. Checkbox
    8. Radio button
    9. Primary button big
    10. Primary button medium
    11. Primary button small
    12. Secondary button big
    13. Secondary button medium
    14. Secondary button small
    15. Inline edit
    16. Form layout
    17. Form sub-headings
    18. Form groups
    19. Hint text
    20. Instructional text
    21. Help text
  12. A modular grid based layout addressing several possibilities of standard web applications and websites layouts
  13. Messaging
    1. Success message page level
    2. Success message inline
    3. Error message page level
    4. Error message inline
  14. Tables
    1. Data table with

i. Pagination

ii. Filter

iii. Sorting

  1. Processing indicator
  2. Progress indicator
  3. Login box
  4. Modal layer small
  5. Modal layer medium
  6. Modal layer large
  7. Tooltip
  8. Typography
    1. Headings- H1 (Page title) to H6
  9. Notification badge
  10. Breadcrumbs
  11. Facetted search
  12. Header compact
  13. Header regular
  14. Footer compact
  15. Thumbnails small
  16. Thumbnails medium
  17. Thumbnails big
  18. Video player small
  19. Video player medium
  20. Video player big
  21. Fat footer
  22. Auto complete
  23. Carousel
  24. User card

A New Cone Trees Communication Style

Status: Work in progress


I’d like to announce a change in my communication style for Cone Trees. It’s probably something that does not exist at the moment, not that I am aware of.

I’ve been busy with work and writing music and spending time with loved ones which has had me writing a lot less frequently as I did on Cone Trees. At the same time, there is so much knowledge for me to share with the UX community to help you work better. This is what prompted me to create a new communication style.

I call it Lean Collaborative Communication

The change is going to be me posting incomplete posts on topics that I will complete over time. The incomplete posts will none the less offer valuable information to you, the UX industry practitioner.

What is the advantage of this? Let me give you an analogy from the music industry, since I am an electronic music artist myself. Musician many a times choose to release singles instead of an album. This ways they get to publish music works quicker rather than having to wait a longer time before people can hear their music.

So these incomplete posts will offer you valuable nuggets of information. I will also be posting so much more frequently. As long as the post is incomplete, it will indicate it is under the post title. In true Lean Collaborative Communication spirit, I am currently marking this post as ‘incomplete’ too.

So that’s the lean part of it, what’s the collaborative part? Well, as long as the post is in ‘incomplete’ state, I will add readers comments that add to the value of the post. These comments will be integrated into the post, crediting the person commenting of course.

So there you have it. This communication style I’ve created is something that will let me post a lot more often and use the community’s engagement so that we together can offer even more value to those who read these posts.

There’s more to write and detail out, but I’ll add on to this post later.

I want to know what you think. Let me know by commenting below.

Google comes out with Google Print

Google just keeps getting better and better. Try Google Print.

What is Google Print?
Google’s mission is to organize the world’s information, but much of that information isn’t yet online. Google Print aims to get it there by putting book content where you can find it most easily – right in your Google search results.

How does Google Print work?
Just do a search on the Google Print homepage. When we find a book whose content contains a match for your search terms, we’ll link to it in your search results. Click a book title and you’ll see the page of the book that has your search terms, along with other information about the book and “Buy this Book” links to online bookstores (you can view the entirety of public domain books or, for books under copyright, just a few pages or in some cases, only the title’s bibliographic data and brief snippets). You can also search for more information within that specific book and find nearby libraries that have it.

Where do these books come from?

The book content in Google Print comes from two sources: publishers and libraries.

Nice. This should help me with research for my thesis.

W3C kicks in with it’s Mobile Web Initiative (2005)

MWI recognizes the mobile device as a first class participant of the Web.
– Tim Berners-Lee, W3C Director.

This is what W3C Director, Tim Berners-Lee said at the launch of its Mobile Web Initiative (MWI) three days back with the aim of simplifying the browsing experience from a mobile device to that of a computer screen.

Testdrive PHP 5.1

If you’re daring enough, you may testdrive the not so soon to come PHP 5.1. You can download it from the PHP Snapshots page. Less than a fortnight back, the dev team at PHP announced release of PHP 5.0.4 and 4.3.11, which are more or less maintainance releases, resolving a number of security issues and fixing a few non-critical bugs.

Solution to Adobe Acrobat Reader/ Professional PDF problem in Firefox

Everybody is so fed up of PDF files opening up in Firefox. So was I, till I followed a really simple fix.

Well, here’s the solution (works for Acrobat Professional 6 and Adobe Reader 6). This works for Windows XP as I tried it on my laptop.

1. Upgrade to Firefox 1.0.3.
2. Goto the installation folder.
3. Navigate to the ‘plug_ins’ folder. In the case of Acrobat Professional, navigate to Acrobat 6.0>Acrobat>plug_ins .
4. Rename the ‘plug_ins’ subfolder to ‘plug_ins_disabled’.
5. Create a new ‘plug_ins’ folder.

6. Copy the files EWH32.api, printme.api and Search.api from ‘plug_ins_disabled’ to ‘plug_ins’.

Any improvements? One thing guaranteed is that Acrobat will load up much faster than what it would before. And it fixed my Firefox problem too.

Web 2.0 – Better…

Digital Web Magazine rocks. And I read this article on Web 2.0, informative and fun as all the articles are at Digital Web.

See you in a few years, Web 3.0 … 2009?