How to Improve E-commerce Revenue Through Improved usability and User Experience
How the University of Mississippi Improved User Experience...
Transcript of How the University of Mississippi Improved User Experience...
![Page 1: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/1.jpg)
HowtheUniversityofMississippiImprovedUserExperienceinSAPPortalApplications
usingCurrentWebTechniques
TheUniversityofMississippiChrisReichley,DirectorofApplicationDevelopmentandIntegration
ErrolSayre,SoftwareDeveloperIV
HERUG2016SessionU-2
![Page 2: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/2.jpg)
polls.olemiss.edu/14Takeabriefsurveyforus.
![Page 3: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/3.jpg)
ImprovingUXatUM
• Manydisparatetechnologies• TomcatJSP,WebDynpro ABAP,LAMP,EPP,BSP
• Manydisparatedevices• Students,Faculty,Staffalluseavarietyofdesktops,laptops,tablets,andphones• 19KstudentsatOxfordcampus• 4Kfaculty/staff• 33KWiFi devices;27Karephones/tablets
![Page 4: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/4.jpg)
Desktop70%
Mobile26%
Tablet4%
UMWebsiteVisitors
![Page 5: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/5.jpg)
Whatisresponsivedesign/UX
• Applicationthatseamlesslyscales/adaptstovaryingscreensizes• StandardHTML+CSStechniques• CSSmediaqueries• Allclient-side
![Page 6: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/6.jpg)
Responsivepagedesign
• Desktopfirst• “Gracefuldegradation”• Adapttomobilesizes/factors• Hides/moves/removesfunctionalityonmobile
• Mobilefirst• “Progressiveenhancement”• Inherentlymobilefriendly• EitheraddsfunctionalityondesktoporlivesatLowestCommonDenominator
• Per-projectbutourdefaultis“Desktopfirst”
![Page 7: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/7.jpg)
API-firstdevelopment
• BuildandtestAPI• Follow-upwithappsforvariousplatforms(web,iOS,etc.)• SAPFiori method(Gatewayservice=>UI)• UMin-housemethod“BSP+JSON”
![Page 8: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/8.jpg)
UM’sBSP+JSONmethod
• buildcontrollertoprovideinterfacetoanRFC,FM,etc.• SimilartoGateway,butprovidessupportformultiplepayloads
• buildappasHTML+JavaScript toconsumethatoutput• SimilartoUI5butbasedonsemanticHTML+standardizedUMCSS
![Page 9: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/9.jpg)
UMCommon
• Centralizedrepositorylikegstatic.com• Sharedcache-pointforCSS,jQuery,HighCharts,DataTables,SweetAlert,etc.
• Styleinventory• Helpsdevelopersmakeuseofcommonmotifs,elements• Upgradesstandard,semanticHTMLtoUMlook&feel
• UMTemplater• StandardscriptincludedinallappstobootstrapCSSetc.• StandardizesemergencynotificationsacrossentireUMsite• Bridgesthegapforoldappstonewdesign• Adaptsforin-portal(EP)ordirect-accessapps(e.g.BSP)
![Page 10: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/10.jpg)
UMTemplater ExampleAdmissionsselectionschange(year,term,major,campus)• in-portal,popped-outminimal,popped-outfulltheme
![Page 11: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/11.jpg)
![Page 12: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/12.jpg)
![Page 13: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/13.jpg)
![Page 14: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/14.jpg)
![Page 15: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/15.jpg)
attedance.olemiss.eduExampleofGatewayJSONAjaxPHPappwithHighCharts
![Page 16: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/16.jpg)
![Page 17: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/17.jpg)
![Page 18: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/18.jpg)
![Page 19: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/19.jpg)
![Page 20: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/20.jpg)
CourseFavoritesandBookingsExampleofBSP+JSONAjaxPortalappwithUMTemplater andHighCharts
![Page 21: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/21.jpg)
![Page 22: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/22.jpg)
StudentActivityReportExampleofBSP+JSONAjaxPortalappwithDataTables
![Page 23: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/23.jpg)
![Page 24: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/24.jpg)
![Page 25: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/25.jpg)
![Page 26: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/26.jpg)
SAPObjectRelationshipGraphBSPapplicationreadingHRP1001withGraphViz JS
![Page 27: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/27.jpg)
![Page 28: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/28.jpg)
catalog.olemiss.eduExampleofPHPappintegratedwithSAPdataviaBSP+JSONandGatewayservices
![Page 29: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/29.jpg)
UMCatalog
• SAPdata+LAMPdisplayapplication• SystemintegrationusingBSP+JSONandGateway
• BSP+JSON• ProvidesbetterperformancefordatacomingoutofRFCsdealingwithSAPSLcM AcademicStructure• SingleservicewithmultiplepayloadsfromRFCvsindividualGatewayserviceforeachtableintheRFC
• URLasUI• Considerinterfaceatthelowestlevel(theURL)• prettyURLs+multi-formatresponses• .htmlvs.json vs.md
![Page 30: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/30.jpg)
catalog.olemiss.eduExampleofPHPappintegratedwithSAPdataviaBSP+JSONandGatewayservices
![Page 31: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/31.jpg)
![Page 32: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/32.jpg)
![Page 33: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/33.jpg)
![Page 34: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/34.jpg)
![Page 35: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/35.jpg)
![Page 36: How the University of Mississippi Improved User Experience ...sites.duke.edu/.../files/2016/06/2-1430-U-2-Improved-User-Experience… · Improved User Experience in SAP Portal Applications](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec4ba54404940155b73287b/html5/thumbnails/36.jpg)