Portal UI Design Patterns
•
17 gostaram•7,379 visualizações
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
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (16)
Semelhante a Portal UI Design Patterns
Semelhante a Portal UI Design Patterns (20)
Último
Último (20)
Portal UI Design Patterns
- 1. Portal UI Design Patterns David Simpson, Information Services, University of Nottingham European Luminis User Group – Nottingham – 19 November 2009
- 2. What? * Repeatable solutions to recurring problems
- 3. Who?
- 8. Design Patterns for Portal Channels
- 9. * Standardised channel designs * Started in 2006 * Reduced clutter in layouts * Increased reliance on jQuery (since 1.1.x)
- 10. Slimline channel * Short text description * Action button to go elsewhere
- 11. Slimline channel
- 12. 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)
- 13. Slimline channel
- 14. Slimline channel
- 15. Slimline channel
- 16. Slimline channel
- 17. Slimline channel
- 18. Accordion * Collapsable panels * Hover/click on title to expand/collapse individual panel
- 19. 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
- 20. Accordion
- 21. Accordion
- 22. Accordion
- 23. Accordion
- 24. Accordion
- 25. Accordion
- 26. Accordion
- 27. Accordion
- 28. Accordion
- 29. Accordion
- 30. Checkout * Indicate the number of steps left in a multistep process
- 31. 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
- 32. Checkout
- 33. Checkout
- 34. Checkout
- 35. Checkout
- 36. Module Tabs * Single list of links formatted as tabs * Stacked horizontally or vertically * Short titles. 2-8 items * Real-world metaphor
- 37. 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
- 38. horizontal tabs vertical tabs Click displays Hover displays different content different content Module Tabs
- 39. Module Tabs
- 40. Module Tabs
- 41. Module Tabs
- 42. Module Tabs
- 43. Module Tabs
- 44. Module Tabs
- 45. Module Tabs
- 46. Module Tabs
- 47. Click on portal tab * A link that triggers a click on a tab with the same link text
- 48. Click on portal tab
- 49. 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
- 50. Drag & Drop + Sortable * 2 patterns combined - complex use case * Select items, then sort the selection
- 51. Drag & Drop + Sortable
- 52. Accessibility * WAI-ARIA Roadmap * Graceful degradation of Javascript effects * Keyboard navigation options * Platform not reliant on Javascript
- 53. UI patterns beyond portals
- 54. Unified intranet * Communciation * Content * Collaboration * Tools
- 55. Unified intranet * Communciation Wordpress * Content Contensis * Collaboration Atlassian Confluence * Tools Sungard Luminis
- 57. Questions? Contact: david.simpson@nottingham.ac.uk @dvdsmpsn Slides: http://davidsimpson.me/
- 58. 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/
Notas do Editor
- 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.