Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade...
Transcript of Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade...
![Page 1: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/1.jpg)
www.rti.orgRTI International is a registered trademark and a trade name of Research Triangle Institute.
Applying UI/UX Best Practices for Web
Surveys
Prepared for FedCASIC 2019
Presenter Rebecca Watkins
![Page 2: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/2.jpg)
About RTI International
RTI International is an independent, nonprofit
research institute dedicated to improving the human
condition. We combine scientific rigor and technical
expertise in social and laboratory sciences,
engineering, and international development to deliver
solutions to the critical needs of clients worldwide.
2
![Page 3: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/3.jpg)
Agenda
– Best practices
– Common
question types
– Mobile
1OVERVIEW
2FEATURES
3CONCLUSION
– Why?
– How?
– Getting started
– Resources
![Page 4: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/4.jpg)
Overview
WHY A TEMPLATE?
Everyone hates bad User Interfaces. We wanted to
standardize our surveys with best practices.
![Page 5: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/5.jpg)
Overview
Frequent need for “personalized” survey
branding
Many different people working on survey
creation
People working on survey creation may not
have in-depth knowledge of front end web
languages (HTML, CSS, JS)
Time saving
WHY A TEMPLATE?
![Page 6: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/6.jpg)
Overview
Mostly a single Cascading Style Sheet
(CSS) file
Some JavaScript
Made to be easily modifiable
WHAT’S IT MADE OF?
![Page 7: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/7.jpg)
Overview
SO WHAT DOES IT LOOK LIKE?
![Page 8: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/8.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Questions above and in-line with answer spaces
![Page 9: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/9.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Text entry boxes that are sized appropriately for
the answer
![Page 10: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/10.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Emphasize question text
![Page 11: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/11.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Mobile friendly
![Page 12: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/12.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Differentiation of visual elements
![Page 13: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/13.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
“Save and Continue Later” option and progress
indicator: accessible but not prominent.
![Page 14: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/14.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Help and Contact Information: available but not distracting.
![Page 15: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/15.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
“Back” and “Next” buttons: carefully positioned
![Page 16: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/16.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Answer space display: white against a colored
background
![Page 17: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/17.jpg)
Features
GENERAL WEB SURVEY BEST PRACTICES
Grid-type questions: shaded rows
![Page 18: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/18.jpg)
Features
SPECIAL CASE QUESTIONS
Don’t Know/Not Applicable option set apart
![Page 19: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/19.jpg)
Features
SPECIAL CASE QUESTIONS
Address question: in-line vs. commonly-seen layout
![Page 20: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/20.jpg)
Features
SPECIAL CASE QUESTIONS
Date question: separate inputs vs. “date picker” tool
![Page 21: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/21.jpg)
Features
MOBILE
Easy-to-tap choice options and
navigation buttons
![Page 22: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/22.jpg)
Features
MOBILE
Grids are “stacked” on
mobile.
![Page 23: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/23.jpg)
Features
MOBILE
…while retaining special
features.
![Page 24: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/24.jpg)
Features
MOBILE
Shading of alternate rows with
side-by-side selection.
![Page 25: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/25.jpg)
Features
MOBILE
“Spinner”-style date picker
![Page 26: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/26.jpg)
Conclusion
Successful use on a number of surveys
so far
Limited need for help from a
programmer
Good reception from clients
HOW’S IT GOING?
![Page 27: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/27.jpg)
Conclusion
Consider a style guide
Write clean HTML
Test on mobile
HOW CAN I DO IT?
![Page 28: Applying UI/UX Best Practices for Web SurveysRTI International is a registered trademark and a trade name of Research Triangle Institute. Applying UI/UX Best Practices for Web Surveys](https://reader036.fdocuments.net/reader036/viewer/2022062603/5f08e0f97e708231d42429db/html5/thumbnails/28.jpg)
Conclusion
Christian, L. M., & Dillman, D. A. (2004). The Influence of Graphical and Symbolic
Language Manipulations on Responses to Self-Administered Questions. Public
Opinion Quarterly, 68(1), 57-80. doi:10.1093/poq/nfh004
Couper, M. P. (2008). Designing effective Web surveys. Cambridge: Cambridge
University Press.
Dillman, D. A., Smyth, J. D., & Christian, L. M. (2014). Internet, mail, and mixed-mode
surveys: The tailored design method. Hoboken, NJ: John Wiley.
Richards, A., Powell, R., Murphy, J., Nguyen, M., & Yu, S. (2016). Gridlocked: The
impact of adapting survey grids for smartphones. Survey Practice, 9(3), 1-14.
Tourangeau, R. (2004). Survey Research and Societal Change. Annual Review of
Psychology, 55(1), 775-801. doi:10.1146/annurev.psych.55.090902.142040
Villar, A., Callegaro, M., & Yang, Y. (2013). Where Am I? A Meta-Analysis of
Experiments on the Effects of Progress Indicators for Web Surveys. Social
Science Computer Review, 31(6), 744-762. doi:10.1177/0894439313497468
REFERENCES