Portal UI Design Patterns


Published on

Some thoughts behind the reusable UI elements in the University of Nottingham's Luminis portal.

Presented at the European Luminis User Group 19 November 2009

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Introduced by architect Christopher Alexander in the 1960s.
    Solutions to recurring problems
  • Computer Science - popularised by the so called Gang of Four book published in 1994.

    HCI – Norman, Tidwell and others

    And on the web? Some examples...
  • More recently, Luke Wroblewski’s book - Web Form Design - is a fantastic example of really well thought out web design.
  • User community contributions.
  • After our initial portal rollout in 2003, it became apparent that our channels were being designed in a kind of ad-hoc approach and some kind of standardisation was required.
  • By 2006, we were organising portal channels into distinct categories and developing standardised reusable XHTML/CSS designs and JavaScript behaviours with a reliance on jQuery for DOM manipulation.

    I can’t say that I’d really noticed that we were using patterns.

    The only person at the time who as talking about patterns was Charmaine (now at Sungard), but she was mainly focussed on Java.
  • The first pattern we really went with was based on the idea of a thin portal that connected to more heavy weight tools or applications.
    This resulted in the slimline channel - a channel title, a tagline and an action button that launched the fully focused channel, or another separate application
  • Some examples...
  • ...
  • ...
  • Assessments - Is an example of a channel that is active or inactive, depending on the time of year. Here’s the inactive state.
  • When it’s active, there’s an action button to launch the full blown application.
  • Which tells you how well you’ve got on and what the implications are.
  • Next up is the accordion.
    At the time, it was relatively rare - e.g. I don’t think that BBC website had got this complicated yet.
  • An example of this is the Library News channel.

    This is really the sort of treatment that the Targeted Announcements channel has been crying out for.
  • Here, we’ve got a variation on the theme. Originally, we had 4 channels taking up quite a lot of real estate. Now we have a single channel using an accordion, but the first item is expanded, so give the user a clue about the other items.
  • Example: Postgraduate applicants apply to study at Nottingham using the Luminis portal.
    These screens show what happens in a (hopefully) successful application process.
  • Module Tabs - as opposed to Navigation Tabs (already used in Luminis) - I’m using Yahoo!’s terminology here
  • The Person Search. As yet, we don’t have a single resource containing all of personnel on all campuses. To get round this, we present 3 forms in a tabbed interface. The country flags help distinguish a change in context when you click on a tab.
  • Here, we have the less traditional vertical tabs.
    For ease of use, a hover event triggers the change in selected tab.
  • Drag & Drop, plus Sortable
    OK, this is cheating a little. These are 2 distinct patterns.
    But in our example, we combine them.
  • The example is our Student Elections channel that’s been running alongside the traditional paper ballots since 2005.
    The Students’ Union uses the single transferable voting system, so some thought is required on the UI design.
    Candidates are dragged from one area to another and then sorted into the order of preference.
  • It’s important to flag up accessibility.
    W3C have a roadmap for accessible rich internet applications.
    All the patterns presented - except maybe the last one - were designed to degrade gracefully in the absence of javascript. e.g. Accordions and tabs show all the content.
    Some have keyboard navigation options to trigger the click events.
    But more importantly, we to ensure the platform that doesn’t rely on Javascript for core functionality - rather as a progressive enhancement.
    Hopefully, this is something Luminis 5 will offer.
  • At Nottingham we’re embarking on a project to provide a “unified intranet” comprising 4 key strands
  • Rather than a single platform, we’re using...
  • By unified, I mean that we’re hoping to achieve an unified look and feel for internal audiences.
    The designs here are mockups only, but have a consistent thread tying them together.
    The design patterns used with Luminis should help inform each of the 4 strands.

    This should help bring consistency and familiarity to each of the applications.
  • Portal UI Design Patterns

    1. 1. Portal UI Design Patterns David Simpson, Information Services, University of Nottingham European Luminis User Group – Nottingham – 19 November 2009
    2. 2. What? * Repeatable solutions to recurring problems
    3. 3. Who?
    4. 4. Design Patterns for Portal Channels
    5. 5. * Standardised channel designs * Started in 2006 * Reduced clutter in layouts * Increased reliance on jQuery (since 1.1.x)
    6. 6. Slimline channel * Short text description * Action button to go elsewhere
    7. 7. Slimline channel
    8. 8. When to Use This Pattern For channels... * with minimal introduction text * that expand to show a lot of information (focused tab) * that link/SSO to other services (in a new window) * that have a lifecycle (e.g. Assessments, Transcript, Exam Timetable) What Problem Does This Solve? * A brief introduction to a complex channel subject * Reduces clutter * Maintain a consistent page layout throughout the year * Minimises database calls to many systems (for complex tabs)
    9. 9. Slimline channel
    10. 10. Slimline channel
    11. 11. Slimline channel
    12. 12. Slimline channel
    13. 13. Slimline channel
    14. 14. Accordion * Collapsable panels * Hover/click on title to expand/collapse individual panel
    15. 15. When to Use This Pattern * too many items to fit into a limited space * all the content would overwhelm the user What Problem Does This Solve? * Reduction of many options and information into a limited space * Compression of items into easily scannable headlines * Prevent unnecessary scrolling
    16. 16. Accordion
    17. 17. Accordion
    18. 18. Accordion
    19. 19. Accordion
    20. 20. Accordion
    21. 21. Accordion
    22. 22. Accordion
    23. 23. Accordion
    24. 24. Accordion
    25. 25. Accordion
    26. 26. Checkout * Indicate the number of steps left in a multistep process
    27. 27. When to Use This Pattern * For channels that display a multi-step process * When there are 3 or more roughly equal sized steps What Problem Does This Solve? * What stage am I at in a multi-step process? * Give an indicator of the length of the process
    28. 28. Checkout
    29. 29. Checkout
    30. 30. Checkout
    31. 31. Checkout
    32. 32. Module Tabs * Single list of links formatted as tabs * Stacked horizontally or vertically * Short titles. 2-8 items * Real-world metaphor
    33. 33. When to Use This Pattern * Multiple panes of content, but limited space for display * When panes donʼt need to be viewed in context with others * Switching context without page refresh (within the module) What Problem Does This Solve? * Navigate 2 or more panes without page refresh * Reduced clutter/real estate usage
    34. 34. horizontal tabs vertical tabs Click displays Hover displays different content different content Module Tabs
    35. 35. Module Tabs
    36. 36. Module Tabs
    37. 37. Module Tabs
    38. 38. Module Tabs
    39. 39. Module Tabs
    40. 40. Module Tabs
    41. 41. Module Tabs
    42. 42. Module Tabs
    43. 43. Click on portal tab * A link that triggers a click on a tab with the same link text
    44. 44. Click on portal tab
    45. 45. When to Use This Pattern * When all the information for a task cannot be displayed within a single portal tab. * This provides a method to navigate to another tab without having to look for the named tab What Problem Does This Solve? * When the workflow requires the user to click on another portal tab to see some other information * Presenting instructions in context within the content without having to move away to navigation elements
    46. 46. Drag & Drop + Sortable * 2 patterns combined - complex use case * Select items, then sort the selection
    47. 47. Drag & Drop + Sortable
    48. 48. Accessibility * WAI-ARIA Roadmap * Graceful degradation of Javascript effects * Keyboard navigation options * Platform not reliant on Javascript
    49. 49. UI patterns beyond portals
    50. 50. Unified intranet * Communciation * Content * Collaboration * Tools
    51. 51. Unified intranet * Communciation Wordpress * Content Contensis * Collaboration Atlassian Confluence * Tools Sungard Luminis
    52. 52. Questions? Contact: david.simpson@nottingham.ac.uk @dvdsmpsn Slides: http://davidsimpson.me/
    53. 53. Photo credits • Photo credits http://www.flickr.com/photos/limonada/81925724/ • http://www.flickr.com/photos/heathzib/354586435/ • http://www.flickr.com/photos/mortimer/221051561/ • http://www.flickr.com/photos/thespeak/137012632/ • http://www.flickr.com/photos/cobalt/927034213/ • http://www.flickr.com/photos/ozyman/153640294/ • http://www.flickr.com/photos/zeandroid/1926401685/ • http://www.flickr.com/photos/miuenski/3572996570/ • http://www.flickr.com/photos/nic/506055341/ • http://www.flickr.com/photos/catikaoe/136347895/ • • http://www.flickr.com/photos/ilmungo/54311941/ http://www.flickr.com/photos/limonada/81925724/ • http://www.flickr.com/photos/eole/2797445219/ • http://www.flickr.com/photos/limonada/5960099/ • http://www.flickr.com/photos/miuenski/2906515891/ • http://www.flickr.com/photos/mortimer/221051561/ • http://www.flickr.com/photos/sainz/3010857125/ • http://www.flickr.com/photos/50826080@N00/3984451716/ • http://www.flickr.com/photos/cobalt/927034213/ • http://www.flickr.com/photos/fxp/2432688339 • http://www.flickr.com/photos/fxp/3317586362/ • http://www.flickr.com/photos/zeandroid/1926401685/ • http://www.flickr.com/photos/mamangoumande/1374543811/ • http://www.flickr.com/photos/fxp/2441924766 • • http://www.flickr.com/photos/nic/506055341/ http://www.flickr.com/photos/betsyjean79/449109593/ • http://www.flickr.com/photos/timtom/3539074695/ • • http://www.flickr.com/photos/ilmungo/54311941/ http://www.flickr.com/photos/apoptotic/2360269448/ • http://www.flickr.com/photos/stephanieasher/131012025/ • http://www.flickr.com/photos/limonada/5960099/ • http://www.flickr.com/photos/miuenski/3066183742/ • http://www.flickr.com/photos/sainz/3010857125/