SETA West 2006 Conference <ul><li>Easy Self-Service Customizations  </li></ul><ul><li>to Enhance the User Experience </li>...
Topics of Discussion <ul><li>How to Improve Usability of Banner Self-Service </li></ul><ul><ul><li>Branding </li></ul></ul...
Topics of Discussion <ul><li>Branding </li></ul>
Usability – Branding <ul><li>Remove Vendor Branding </li></ul><ul><ul><li>Banner Self-Service </li></ul></ul><ul><ul><li>B...
Usability – Branding <ul><li>Create your own “branding” </li></ul><ul><li>Instead of Banner Self-Service… </li></ul><ul><u...
Usability – Branding (cont’d) <ul><li>Create your graphic </li></ul><ul><li>Transfer your new graphic files to the Applica...
Usability – Branding (cont’d) <ul><li>Customize  menu items or other elements  with your new graphic </li></ul>
Usability – Branding (cont’d) <ul><li>Our new page after customizing: </li></ul>
Usability – Branding (cont’d) <ul><li>You can use your new graphic and branding, everywhere…  </li></ul><ul><ul><li>Other ...
Usability – Branding (cont’d) <ul><li>Student Life LoboWeb Channel </li></ul>
Usability – Branding (cont’d) <ul><li>Faculty Life LoboWeb Channel </li></ul>
Usability – Branding (cont’d) <ul><li>Employee Life LoboWeb Channel </li></ul>
Topics of Discussion <ul><li>Look & Feel </li></ul>
Usability – Look & Feel <ul><li>Customize your Stylesheets </li></ul><ul><ul><li>web_defaulthome.css – Home page </li></ul...
Usability – Look & Feel <ul><li>Customize your Stylesheets </li></ul><ul><ul><li>To reflect your institution’s colors </li...
What You Need (cont’d) <ul><li>UNM Custom Stylesheets </li></ul><ul><ul><li>Available for download! </li></ul></ul><ul><ul...
Usability–Look & Feel (cont’d) <ul><li>Transfer new stylesheet to the application server </li></ul><ul><li>Update “CSS URL...
Examples–Look & Feel (old) Old Home Page:
Examples–Look & Feel (new) New Home Page:
Examples–Look & Feel (new) <ul><li>Change the print stylesheet to eliminate unnecessary elements from printed pages: </li>...
Usability – Look & Feel <ul><li>DIV.poweredbydiv { </li></ul><ul><li>/* Hides “powered by SCT” from footer of printed page...
Usability–Look & Feel (cont’d)  <ul><li>Transfer new stylesheet to the application server </li></ul><ul><li>Update “PRINTC...
Examples – Look & Feel (old) <ul><li>Use styles to further customize elements directly in WebTailor </li></ul>
Examples – Look & Feel (old) <ul><li>Indent descriptions underneath menu items </li></ul><ul><ul><li>Saves real estate </l...
Examples – Look & Feel (old)
Examples–Look & Feel (new) New Menu:
Usability – Look & Feel <ul><li>/* UNM Mod – new style for menu item separators */ </li></ul><ul><li>.unmseparator { </li>...
Examples–Look & Feel (new) <ul><li>Separators </li></ul><ul><li>Darker text </li></ul><ul><li>Indented text </li></ul>
Topics of Discussion <ul><li>Navigation </li></ul>
Usability – Navigation <ul><li>Improve Navigation </li></ul><ul><ul><li>Combine Menus </li></ul></ul><ul><ul><li>Re-name M...
Examples – Navigation (old)
Examples – Navigation (new) Registration Student Records
Examples – Navigation (new)
Usability–Navigation (cont’d) <ul><li>Re-name Menu Items </li></ul><ul><ul><li>Use action verbs instead of lengthy descrip...
Usability–Navigation (cont’d) <ul><li>Re-name Menu Items </li></ul><ul><ul><li>Eliminate unnecessary words </li></ul></ul>...
Usability–Navigation (cont’d) <ul><li>Re-order Menu Items </li></ul><ul><ul><li>By function </li></ul></ul>
Usability–Navigation (cont’d) <ul><li>Re-order Menu Items </li></ul><ul><ul><li>By popularity  </li></ul></ul>
Usability–Navigation (cont’d) <ul><li>Revamp bottom Menu Items </li></ul><ul><ul><li>To avoid confusing back-and-forth nav...
Usability–Navigation (cont’d)
Usability–Navigation (cont’d) <ul><li>Rename Back Link Menu links </li></ul><ul><ul><li>So they don’t have to use back but...
Usability–Navigation (cont’d) <ul><li>Update “Back Link Text” </li></ul>
Usability–Navigation (cont’d) <ul><li>Combine Menus </li></ul><ul><li>Re-name Menu Items </li></ul><ul><ul><li>Use action ...
Usability – Info & Help Text <ul><li>Simplify Info Text </li></ul><ul><ul><li>Use action verbs </li></ul></ul><ul><ul><li>...
Usability – Global Help <ul><li>Customize your Global Help File </li></ul><ul><ul><li>twbhhelp.html </li></ul></ul>
Examples–Global Help File (new)
Global Help File (cont’d) <ul><li>Transfer your new global help file to the application server </li></ul><ul><li>Update “H...
Usability - Summary  <ul><li>Remove Branding </li></ul><ul><li>Improve Look & Feel </li></ul><ul><ul><li>Create your own g...
The Not-so-Easy Customizations! <ul><li>View Printable Schedule </li></ul><ul><li>Enter Final Grades / Last Date of Attend...
The Not-so-Easy Customizations! <ul><li>View Detail Schedule (old) </li></ul>
The Not-so-Easy Customizations! <ul><li>View Printable Schedule (new) </li></ul>
The Not-so-Easy Customizations! <ul><li>Enter Final Grades (old) </li></ul>
The Not-so-Easy Customizations! <ul><li>Enter Final Grades (new) </li></ul>
Questions and Answers
Presenter Information <ul><li>Thank you for attending! </li></ul><ul><li>Erica L. Grong </li></ul><ul><li>University of Ne...
Upcoming SlideShare
Loading in …5
×

Easy SunGard Banner Self-Service Customizations to Enhance the User Experience

3,378 views

Published on

Presented at SETA West 2006 Conference (SunGardHE Education Technology Association)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,378
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Easy SunGard Banner Self-Service Customizations to Enhance the User Experience

  1. 1. SETA West 2006 Conference <ul><li>Easy Self-Service Customizations </li></ul><ul><li>to Enhance the User Experience </li></ul><ul><ul><li>Erica L. Grong </li></ul></ul><ul><ul><li>University of New Mexico </li></ul></ul><ul><ul><li>Team Lead </li></ul></ul><ul><ul><li>LoboWeb/LoboPhone Support </li></ul></ul>
  2. 2. Topics of Discussion <ul><li>How to Improve Usability of Banner Self-Service </li></ul><ul><ul><li>Branding </li></ul></ul><ul><ul><li>Look & Feel </li></ul></ul><ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Info & Help Text </li></ul></ul>
  3. 3. Topics of Discussion <ul><li>Branding </li></ul>
  4. 4. Usability – Branding <ul><li>Remove Vendor Branding </li></ul><ul><ul><li>Banner Self-Service </li></ul></ul><ul><ul><li>Banner Voice Response </li></ul></ul><ul><li>Reasons to Remove Vendor Branding: </li></ul><ul><ul><li>No one knows what “Banner” is </li></ul></ul><ul><ul><li>No one knows that “Self-Service” is a web application </li></ul></ul><ul><ul><li>No one knows what “Voice Response” means </li></ul></ul><ul><ul><li>Universities are discouraged to market products they are using </li></ul></ul>
  5. 5. Usability – Branding <ul><li>Create your own “branding” </li></ul><ul><li>Instead of Banner Self-Service… </li></ul><ul><ul><li>We call it … LoboWeb! </li></ul></ul><ul><li>Instead of Banner Voice Response… </li></ul><ul><ul><li>We call it … LoboPhone! </li></ul></ul><ul><li>Lobo = our athletic team </li></ul><ul><li>We already had other things called “Lobo” </li></ul><ul><ul><li>LoboCare, LoboCard, LoboMart, LoboCash </li></ul></ul>
  6. 6. Usability – Branding (cont’d) <ul><li>Create your graphic </li></ul><ul><li>Transfer your new graphic files to the Application Server </li></ul><ul><li>Add them to WebTailor as a New Graphic Element </li></ul>
  7. 7. Usability – Branding (cont’d) <ul><li>Customize menu items or other elements with your new graphic </li></ul>
  8. 8. Usability – Branding (cont’d) <ul><li>Our new page after customizing: </li></ul>
  9. 9. Usability – Branding (cont’d) <ul><li>You can use your new graphic and branding, everywhere… </li></ul><ul><ul><li>Other web sites </li></ul></ul><ul><ul><li>Printed publications </li></ul></ul>
  10. 10. Usability – Branding (cont’d) <ul><li>Student Life LoboWeb Channel </li></ul>
  11. 11. Usability – Branding (cont’d) <ul><li>Faculty Life LoboWeb Channel </li></ul>
  12. 12. Usability – Branding (cont’d) <ul><li>Employee Life LoboWeb Channel </li></ul>
  13. 13. Topics of Discussion <ul><li>Look & Feel </li></ul>
  14. 14. Usability – Look & Feel <ul><li>Customize your Stylesheets </li></ul><ul><ul><li>web_defaulthome.css – Home page </li></ul></ul><ul><ul><li>web_defaultmenu.css – Menu pages </li></ul></ul><ul><ul><li>web_defaultapp.css – Application pages </li></ul></ul><ul><ul><li>web_defaultprint.css – Print Stylesheet </li></ul></ul><ul><ul><li>web_defaulthelp.css – Help pop-ups </li></ul></ul>
  15. 15. Usability – Look & Feel <ul><li>Customize your Stylesheets </li></ul><ul><ul><li>To reflect your institution’s colors </li></ul></ul><ul><li>/* Change colors to match UNM branding */ </li></ul><ul><li>#CED5EA --> #DCCCAE // Light blue --> Teal </li></ul><ul><li>#1E2B83 --> #003659 // Navy blue --> Teal Dark </li></ul><ul><li>#E3E5EE --> #DCCCAE // Light gray --> Tan </li></ul><ul><li>#800080 --> #C00000 // Purple --> Red </li></ul>
  16. 16. What You Need (cont’d) <ul><li>UNM Custom Stylesheets </li></ul><ul><ul><li>Available for download! </li></ul></ul><ul><ul><li>http:// www.setasource.org </li></ul></ul><ul><ul><li>Click on Conferences, select Presentation Search </li></ul></ul><ul><ul><li>Search Criteria: </li></ul></ul><ul><ul><ul><li>Conference = “SETA West 2006” </li></ul></ul></ul><ul><ul><ul><li>Keyword = “Easy Banner” </li></ul></ul></ul><ul><ul><li>“ unm_css_mods.doc” </li></ul></ul>
  17. 17. Usability–Look & Feel (cont’d) <ul><li>Transfer new stylesheet to the application server </li></ul><ul><li>Update “CSS URL” </li></ul><ul><ul><li>/unm/css/unm_web_defaultapp.css </li></ul></ul>
  18. 18. Examples–Look & Feel (old) Old Home Page:
  19. 19. Examples–Look & Feel (new) New Home Page:
  20. 20. Examples–Look & Feel (new) <ul><li>Change the print stylesheet to eliminate unnecessary elements from printed pages: </li></ul>
  21. 21. Usability – Look & Feel <ul><li>DIV.poweredbydiv { </li></ul><ul><li>/* Hides “powered by SCT” from footer of printed page */ </li></ul><ul><li>display: none </li></ul><ul><li>} </li></ul><ul><li>FORM.fastinfo { </li></ul><ul><li>/* Hides “UNM FastInfo” from footer of printed page */ </li></ul><ul><li>display: none </li></ul><ul><li>} </li></ul><ul><li>.releasetext { </li></ul><ul><li>/* Hides “Release N.N” from footer of printed page */ </li></ul><ul><li>display: none </li></ul><ul><li>} </li></ul>
  22. 22. Usability–Look & Feel (cont’d) <ul><li>Transfer new stylesheet to the application server </li></ul><ul><li>Update “PRINTCSSURL” </li></ul><ul><ul><li>/unm/css/unm_web_defaultprint.css </li></ul></ul>
  23. 23. Examples – Look & Feel (old) <ul><li>Use styles to further customize elements directly in WebTailor </li></ul>
  24. 24. Examples – Look & Feel (old) <ul><li>Indent descriptions underneath menu items </li></ul><ul><ul><li>Saves real estate </li></ul></ul><ul><ul><li>Easier on the eye </li></ul></ul><ul><li>Old Menu: </li></ul>
  25. 25. Examples – Look & Feel (old)
  26. 26. Examples–Look & Feel (new) New Menu:
  27. 27. Usability – Look & Feel <ul><li>/* UNM Mod – new style for menu item separators */ </li></ul><ul><li>.unmseparator { </li></ul><ul><ul><li>color:white; </li></ul></ul><ul><ul><li>background-color:#C00000; </li></ul></ul><ul><ul><li>font-weight:bold; </li></ul></ul><ul><ul><li>width:300px; </li></ul></ul><ul><ul><li>text-align:center; </li></ul></ul><ul><ul><li>display:block; </li></ul></ul><ul><ul><li>cursor:text; </li></ul></ul><ul><li>} </li></ul>
  28. 28. Examples–Look & Feel (new) <ul><li>Separators </li></ul><ul><li>Darker text </li></ul><ul><li>Indented text </li></ul>
  29. 29. Topics of Discussion <ul><li>Navigation </li></ul>
  30. 30. Usability – Navigation <ul><li>Improve Navigation </li></ul><ul><ul><li>Combine Menus </li></ul></ul><ul><ul><li>Re-name Menu Items </li></ul></ul><ul><ul><li>Re-order Menu Items </li></ul></ul><ul><ul><li>Revamp bottom Menu Items </li></ul></ul><ul><ul><li>Rename Back Link Menu links </li></ul></ul>
  31. 31. Examples – Navigation (old)
  32. 32. Examples – Navigation (new) Registration Student Records
  33. 33. Examples – Navigation (new)
  34. 34. Usability–Navigation (cont’d) <ul><li>Re-name Menu Items </li></ul><ul><ul><li>Use action verbs instead of lengthy descriptions </li></ul></ul><ul><ul><li>“Registration Fee Assessment” </li></ul></ul><ul><ul><ul><li>…becomes… </li></ul></ul></ul><ul><ul><li>“View Tuition & Fees Owed” </li></ul></ul>
  35. 35. Usability–Navigation (cont’d) <ul><li>Re-name Menu Items </li></ul><ul><ul><li>Eliminate unnecessary words </li></ul></ul><ul><ul><li>“Student Detail Schedule by Day & Time” </li></ul></ul><ul><ul><li>“Student Detail Schedule” </li></ul></ul><ul><ul><ul><li>…becomes… </li></ul></ul></ul><ul><ul><li>“View Weekly Schedule” </li></ul></ul><ul><ul><li>“View Detail Schedule” </li></ul></ul>
  36. 36. Usability–Navigation (cont’d) <ul><li>Re-order Menu Items </li></ul><ul><ul><li>By function </li></ul></ul>
  37. 37. Usability–Navigation (cont’d) <ul><li>Re-order Menu Items </li></ul><ul><ul><li>By popularity </li></ul></ul>
  38. 38. Usability–Navigation (cont’d) <ul><li>Revamp bottom Menu Items </li></ul><ul><ul><li>To avoid confusing back-and-forth navigation </li></ul></ul><ul><ul><li>For more intuitive navigation flow </li></ul></ul>
  39. 39. Usability–Navigation (cont’d)
  40. 40. Usability–Navigation (cont’d) <ul><li>Rename Back Link Menu links </li></ul><ul><ul><li>So they don’t have to use back button </li></ul></ul><ul><li>Old: </li></ul><ul><li>New: </li></ul>
  41. 41. Usability–Navigation (cont’d) <ul><li>Update “Back Link Text” </li></ul>
  42. 42. Usability–Navigation (cont’d) <ul><li>Combine Menus </li></ul><ul><li>Re-name Menu Items </li></ul><ul><ul><li>Use action verbs instead of lengthy descriptions </li></ul></ul><ul><ul><li>Eliminate unnecessary words </li></ul></ul><ul><li>Re-order Menu Items </li></ul><ul><ul><li>By function </li></ul></ul><ul><ul><li>By popularity (or to hide) </li></ul></ul><ul><li>Revamp bottom Menu Items </li></ul><ul><ul><li>To avoid confusing back-and-forth navigation </li></ul></ul><ul><ul><li>For more intuitive navigation flow </li></ul></ul><ul><li>Rename Back Link Menu links </li></ul><ul><ul><li>So they don’t have to use back button </li></ul></ul>
  43. 43. Usability – Info & Help Text <ul><li>Simplify Info Text </li></ul><ul><ul><li>Use action verbs </li></ul></ul><ul><ul><li>Use bold text </li></ul></ul><ul><ul><li>Use as few words as possible </li></ul></ul><ul><ul><li>Use bulleted lists </li></ul></ul>
  44. 44. Usability – Global Help <ul><li>Customize your Global Help File </li></ul><ul><ul><li>twbhhelp.html </li></ul></ul>
  45. 45. Examples–Global Help File (new)
  46. 46. Global Help File (cont’d) <ul><li>Transfer your new global help file to the application server </li></ul><ul><li>Update “HELP URL” </li></ul><ul><ul><li>/unm/wtlhelp/unm_twbhhelp.html </li></ul></ul>
  47. 47. Usability - Summary <ul><li>Remove Branding </li></ul><ul><li>Improve Look & Feel </li></ul><ul><ul><li>Create your own graphics </li></ul></ul><ul><ul><li>Customize stylesheets </li></ul></ul><ul><li>Improve Navigation </li></ul><ul><ul><li>Combine Menus </li></ul></ul><ul><ul><li>Re-name Menu Items </li></ul></ul><ul><ul><li>Re-order Menu Items </li></ul></ul><ul><ul><li>Revamp bottom Menu Items </li></ul></ul><ul><ul><li>Rename Back Link Menu links </li></ul></ul><ul><li>Simplify Info Text </li></ul><ul><li>Customize Global Help </li></ul>
  48. 48. The Not-so-Easy Customizations! <ul><li>View Printable Schedule </li></ul><ul><li>Enter Final Grades / Last Date of Attendance </li></ul>
  49. 49. The Not-so-Easy Customizations! <ul><li>View Detail Schedule (old) </li></ul>
  50. 50. The Not-so-Easy Customizations! <ul><li>View Printable Schedule (new) </li></ul>
  51. 51. The Not-so-Easy Customizations! <ul><li>Enter Final Grades (old) </li></ul>
  52. 52. The Not-so-Easy Customizations! <ul><li>Enter Final Grades (new) </li></ul>
  53. 53. Questions and Answers
  54. 54. Presenter Information <ul><li>Thank you for attending! </li></ul><ul><li>Erica L. Grong </li></ul><ul><li>University of New Mexico </li></ul><ul><ul><li>Team Lead </li></ul></ul><ul><ul><li>LoboWeb / LoboPhone Support </li></ul></ul><ul><li>[email_address] </li></ul><ul><li>(505) 277-3196 desk </li></ul><ul><li>(505) 934-5494 cell </li></ul><ul><li>(505) 277-8101 fax </li></ul>

×