Designing a more elegant Portal

An overview of design principals and processes that will help you achieve a better Portal user experience. Bring information to the user and guide them with notifications. Encourage searching over browsing. Make evidence based decisions using surveys, usability studies and monitoring. An overview of our portlet style-guide that identifies common user interface elements and standardizes HTML/CSS.

This presentation covers lessons-learned and design choices from CalPoly's uPortal4 upgrade project. The talk will touch on web technologies such as HTML/CSS and AJAX briefly but the focus is on high-level design not technical details.

Transcript

1. Designing a more elegant Portal Designing a more elegant Portal Arlo White Arlo White CalPoly, San Luis Obispo CalPoly, San Luis Obispo
2. define:elegant define:elegant • Pleasingly graceful and stylish in appearance or manner • (of a scientific theory or solution to a problem) Pleasingly ingenious and simple
3. Our old portal... Our old portal...
4. Old Portal Old Portal
5. Old Portal, Reg Old Portal, Reg
6. How did this happen? How did this happen? • Lack of focus on design and UX • Design by Email • Portal is at the center of competing interests
7. Motivation to change Motivation to change • Happy Users • Happy Developers • Service desk password reset confusion • Enrollment Verification unknown to users
8. -Albert Einstein Insanity: doing the same thing over and over again and expecting different results.
9. Changing Changing • Commit to good design – Change culture – Part of the process • Gather resources • Measure • Define portal vision
10. Design Resources Design Resources • Design experts on the team • Other departments good at design? • Students • Professors • Mainstream websites (Google, Facebook, etc)
11. Your Team Your Team
12. Students Students • Cheap • Flexible hiring • Critical Mass • Management • Diverse abilities
13. Professors Professors • Class projects • Research
14. Look at other sites Look at other sites • What conventions do they have? – Applicable to the portal? • By mimicking patterns in these sites, the portal will be more intuitive to users. “ ”
15. Click tracking: CrazyEgg Click tracking: CrazyEgg
16. Surveys Surveys • Only as good as your questions • Often tells you what you know, some surprises
17. Usability Testing Usability Testing • Most useful, forces you to be honest about confusion of portal. • Do early & often • Not a big deal, just 3 users. • Interested Professors – Eye tracking lab
18. Navigation Paradigms Navigation Paradigms • Browsing • Searching • Notifications
19. Browse Browse • “link-dominant users ” • Hide content from groups that don't need it.
20. Search Search • “search-dominant users ” • High quality results • Usability testing
21. Notifications Notifications • Information when it's relevant • Direct users
22. Portlet Techniques Portlet Techniques • Slow I/O, use AJAX • Widgets to hide content – Panes, dialogs, etc
23. New Portal New Portal
24. Portlet Organization Portlet Organization • Do users always want to see that portlet? • Link/search instead • Easy to find?
25. Portlet Style Guide Portlet Style Guide • JSR 168? • Standardization • uPortal CSS Messy
26. Preserving the Home page from promotional overload requires constant vigilance, since it usually happens gradually, with the slow, inexorable addition of just...one...more...thing. - Steve Krug Pg 112. Don't Make Me Think. 2Nd Ed.
27. Leadership & Authority Leadership & Authority
28. Conclusion Conclusion • Change culture • Find design resources • Establish processes for maintaining good design • Collaborate, share design patterns
29. Recommended Reading Recommended Reading • Don't Make Me Think, Steve Krug • Search for Design Patterns • uportal-user@lists.ja-sig.org
30. Questions? Questions?
31. Image Attributions Image Attributions • Portal screenshots and Crazy Egg my own • Double Face Palm – https://secure.flickr.com/photos/darkuncle/4421755040/ • Professor – P. G. Champion / Wikimedia Commons / © CC BY SA 2.0 UK – – – – https://commons.wikimedia.org/wiki/File:Professor_Heinz_Wolff _3529.jpg Einstein, for quote https://secure.flickr.com/photos/sean_lo/3151015039/ Smiley http://en.m.wikipedia.org/wiki/File:718smiley.png Crazy Student http://en.m.wikipedia.org/wiki/File:718smiley.png Usability Testing https://secure.flickr.com/photos/eekim/1819077325/ Magnifying glass http://pixabay.com/en/icon-glass-small-outli ne-symbol-36749/ Stormtrooper in balls https://farm4.staticflickr.com/3354/3590064 682_1881c60430_z.jpg Penguins https://commons.wikimedia.org/wiki/File:Fal kland_Islands_Penguins_40.jpg Butterfly https://secure.flickr.com/photos/anandham/ 4499539060/ Teamwork https://commons.wikimedia.org/wiki/File:W orking_Together_Teamwork_Puzzle_Conc ept.jpg