Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Portal UI Design Patterns

12,965 views

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

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/

×