Implementation of a Web-Based Card Sorting Application with Responsive Design
3 likes891 views
The document describes the development of a web-based card sorting application designed with responsive design to facilitate the categorization of digital data, addressing organizational challenges with traditional methods. It compares existing card sorting tools and highlights necessary enhancements such as hierarchical sorting and multi-language support. The implementation utilizes modern web technologies and includes testing phases to ensure functionality and performance.
Implementation of a Web-Based Card Sorting Application with Responsive Design
- 1. Concept and Prototypical Re-Implementation of a Web-Based Card Sorting Application with Responsive Design Can Card Sorting be Done on a Smartphone? By Kailaash Balachandran Supervisor: Prof. Dr. Gerd Szwillus Prof. Dr. Gitta Domik-Kienegger
- 2. Outline • Organizational Challenges • Fundamentals • Existing tools o Comparison o Missing Enhancements • The Application o Frameworks & Design decisions o Testing • Conclusion and Future work 2Kailaash Balachandran
- 3. Outline • Organizational Challenges • Fundamentals • Existing tools o Comparison o Missing Enhancements • The Application o Frameworks & Design decisions o Testing • Conclusion and Future work 3Kailaash Balachandran
- 4. Organizational Challenges The Idea of Categorization 4Kailaash Balachandran
- 5. Organizational Challenges Okay…so what’s the big deal about it? 4Kailaash Balachandran
- 6. Organizational Challenges One could order books by: • genre • author • size • favorites • … 5Kailaash Balachandran
- 7. Organizational Challenges Library Classification Systems: • Dewey Decimal • Library of Congress • Universal Decimal • … 6Kailaash Balachandran
- 8. Organizational Challenges But, the case of organizing digital data is different from physical items. 7Kailaash Balachandran
- 9. Organizational Challenges www.uni-paderborn.de Research Applicant Prospective Student 8Kailaash Balachandran
- 10. Organizational Challenges www.uni-paderborn.de Changes in usage context…. Research Applicant Prospective Student 9Kailaash Balachandran
- 11. Organizational Challenges I’m pretty sure I know how to organize content that will make sense to our site visitors.. Questions to ponder: • Why are most people coming to your site? • Who (or what) decided? • How did you insure that different people find what they’re looking for? 10Kailaash Balachandran
- 12. Organizational Challenges I’m pretty sure I know how to organize content that will make sense to our site visitors.. 11Kailaash Balachandran
- 13. Organizational Challenges Solution: Gather perspectives of all users to design the information architecture. “Card Sorting” 12Kailaash Balachandran
- 14. Outline • Organizational Challenges • Fundamentals • Existing tools o Comparison o Missing Enhancements • The Application o Frameworks & Design decisions o Testing • Conclusion and Future work 13Kailaash Balachandran
- 15. Fundamentals Card Sorting: “Card Sorting is an empirical method to structure a set of terms (cards) into semantically connected groups (categories) - (Wood und Wood 2008; Spencer 2009; Hudson 2012) “ 14Kailaash Balachandran
- 16. Fundamentals Card Sorting: “Card Sorting is an empirical method to structure a set of terms (cards) into semantically connected groups (categories) - (Wood und Wood 2008; Spencer 2009; Hudson 2012) “ Realization: • Traditional approach using physical cards • Using Card sorting tools 15Kailaash Balachandran
- 17. Fundamentals Sort Methods: • Flat Structure • Hierarchical Sort Variants: • Closed: Cards and categories are predefined. • Open : Cards are predefined. Participants are allowed to create categories. 16Kailaash Balachandran
- 18. Fundamentals Advantages of using Card Sort tools : • Involve large number of participants. • Analysis tools. • Today’s design experts need this. Tool Types: • System-run Software • Web-based Application 17Kailaash Balachandran
- 19. Outline • Organizational Challenges • Fundamentals • Existing tools o Comparison o Missing Enhancements • The Application o Frameworks & Design decisions o Testing • Conclusion and Future work 18Kailaash Balachandran
- 20. Comparison of existing tools Some popular card sorting tools: • UXSort • Optimal Sort • User Zoom • Wecaso 1.0 19Kailaash Balachandran
- 21. Comparison of existing tools UXSort Optimal Sort UserZoom Wecaso 1.0 Web-based No Yes Yes Yes Hierarchical sort Yes No No No Multiple insert No No No Yes Responsive design No Yes No No Multi-language support No No No No Are Evaluation tools available? Yes Yes Yes Yes Modern User backend No Yes Yes No 20Kailaash Balachandran
- 22. Comparison of existing tools UXSort Optimal Sort UserZoom Wecaso 1.0 Web-based No Yes Yes Yes Hierarchical sort Yes No No No Multiple insert No No No Yes Responsive design No Yes No No Multi-language support No No No No Are Evaluation tools available? Yes Yes Yes Yes Modern User backend No Yes Yes No 21Kailaash Balachandran
- 23. Comparison of existing tools 22 Much needed enhancements: • Responsive Design • Hierarchical Sort • Multiple Insertions of card • Multi-language support Goal of this thesis Kailaash Balachandran
- 24. Comparison of existing tools 22 a Much needed enhancements: • Responsive Design • Hierarchical Sort • Multiple Insertions of card • Multi-language support Goal of this thesis Kailaash Balachandran
- 25. Comparison of existing tools 23Kailaash Balachandran
- 26. Comparison of existing tools 24Kailaash Balachandran
- 27. Comparison of existing tools 25 Today’s mobile trend: • iOS • Android • Windows • Blackberry • Mobile Web • … Kailaash Balachandran
- 28. Comparison of existing tools 25 Today’s mobile trend: • iOS • Android • Windows • Blackberry • Mobile Web • … “90% of all websites are too simple to justify the time and effort it takes to develop separate mobile versions” - Common sense thinker Kailaash Balachandran
- 29. Comparison of existing tools 26 Today’s mobile trend: • iOS • Android • Windows • Blackberry • Mobile Web • … Kailaash Balachandran
- 30. Comparison of existing tools 27 Responsive Design: Kailaash Balachandran
- 31. Comparison of existing tools 28 Much needed enhancements: • Responsiveness • Hierarchical Sort • Multiple Insertions of cards • Multi-language support Kailaash Balachandran
- 32. Comparison of existing tools 29 An example for hierarchical nesting: Kailaash Balachandran
- 33. Comparison of existing tools 30 Much needed enhancements: • Responsiveness • Hierarchical Sort • Multiple Insertions of card • Multi-language support Kailaash Balachandran
- 34. Comparison of existing tools 31 Much needed enhancements: • Responsiveness • Hierarchical Sort • Multiple Insertions of card • Multi-language support Kailaash Balachandran
- 35. Comparison of existing tools 32 ? UXSort Optimal Sort UserZoom Wecaso 1.0 Web-based No Yes Yes Yes Hierarchical sort Yes No No No Multiple insert No No No Yes Are Evaluation tools available? Yes Yes Yes Yes Modern User backend No Yes Yes No Responsive design No Yes No No Multi-language support No No No No Kailaash Balachandran
- 36. Comparison of existing tools 33 UXSort Optimal Sort UserZoom Wecaso 1.0 Web-based No Yes Yes Yes Hierarchical sort Yes No No No Multiple insert No No No Yes Are Evaluation tools available? Yes Yes Yes Yes Modern User backend No Yes Yes No Responsive design No Yes No No Multi-language support No No No No Wecaso 2.0 Yes Yes Yes Yes Yes Yes Yes Kailaash Balachandran
- 37. Outline 34 • Organizational Challenges • Fundamentals • Existing tools o Comparison o Missing Enhancements • The Application o Frameworks & Design decisions o Testing • Conclusion and Future work Kailaash Balachandran
- 38. The Application 35 Frameworks and design decisions: • Use of modern Web Technologies o HTML5 o AJAX o RESTful o jQuery o Twitter Bootstrap o Laravel 5.2 o MySQL o Angular 1.0 • Enhanced user / administrator capabilities • Support for mobile devices Kailaash Balachandran
- 39. The Application 36 Dashboard view in Wecaso 1.0 : Kailaash Balachandran
- 40. The Application 37 Dashboard view in Wecaso 2.0 : Kailaash Balachandran
- 41. Testing 38 Testing: • To check the functionality, performance, reliability etc. • Three blocks: 1. Unit Tests 2. Test Plugin 3. User Tests User Tests Test Plugin Unit Tests Kailaash Balachandran
- 42. Testing 39 1. Unit Tests • Test of single components • No GUI involved 2. Test Plugin • Integrated testing as a whole • No GUI involved • Automated execution of test plan Kailaash Balachandran
- 43. Testing 40 3. User Tests • Beta test was conducted successfully • All reported bugs were fixed • Log data was monitored throughout the test session. Kailaash Balachandran
- 44. Outline 41 • Organizational Challenges • Fundamentals • Existing tools o Comparison o Missing Enhancements • The Application o Frameworks & Design decisions o Testing • Conclusion and Future work Kailaash Balachandran
- 45. Conclusion and Future work 42 • Summary o In the thesis, an user-centric technique known as Card Sorting is implemented as a web application. o The application has a responsive design to flex to multiple displays. o Variants of open and closed type with options of hierarchical sort and multiple insert are implemented. o The application supports multiple languages and can be extended further. Kailaash Balachandran
- 46. Conclusion and Future work 43 • Future work o Implementation of Hybrid Sort o Integrating Casolysis o Image and Video Sort o Evaluation of hierarchical sort experiments Kailaash Balachandran
- 47. 44 Demo ! Experiment Demo Kailaash Balachandran
- 48. Thank you. Questions? 45Kailaash Balachandran