implementation of a web-based card sorting application with responsive design
TRANSCRIPT
![Page 1: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/1.jpg)
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
![Page 2: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/2.jpg)
Outline
• Organizational Challenges
• Fundamentals
• Existing toolso Comparison
o Missing Enhancements
• The Applicationo Frameworks & Design decisions
o Testing
• Conclusion and Future work
2Kailaash Balachandran
![Page 3: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/3.jpg)
Outline
• Organizational Challenges
• Fundamentals
• Existing toolso Comparison
o Missing Enhancements
• The Applicationo Frameworks & Design decisions
o Testing
• Conclusion and Future work
3Kailaash Balachandran
![Page 4: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/4.jpg)
Organizational Challenges
The Idea of Categorization
4Kailaash Balachandran
![Page 5: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/5.jpg)
Organizational Challenges
Okay…so what’s the big deal about it?
4Kailaash Balachandran
![Page 6: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/6.jpg)
Organizational Challenges
One could order books
by:
• genre
• author
• size
• favorites
• …
5Kailaash Balachandran
![Page 7: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/7.jpg)
Organizational Challenges
Library Classification
Systems:
• Dewey Decimal
• Library of Congress
• Universal Decimal
• …
6Kailaash Balachandran
![Page 8: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/8.jpg)
Organizational Challenges
But, the case of organizing digital data is different
from physical items.
7Kailaash Balachandran
![Page 9: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/9.jpg)
Organizational Challenges
www.uni-paderborn.de
Research Applicant Prospective Student
8Kailaash Balachandran
![Page 10: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/10.jpg)
Organizational Challenges
www.uni-paderborn.de
Changes in usage
context….
Research Applicant Prospective Student
9Kailaash Balachandran
![Page 11: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/11.jpg)
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
![Page 12: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/12.jpg)
Organizational Challenges
I’m pretty sure I know how to organize content that will
make sense to our site visitors..
11Kailaash Balachandran
![Page 13: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/13.jpg)
Organizational Challenges
Solution:
Gather perspectives of all
users to design the
information architecture.
“Card Sorting”
12Kailaash Balachandran
![Page 14: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/14.jpg)
Outline
• Organizational Challenges
• Fundamentals
• Existing toolso Comparison
o Missing Enhancements
• The Applicationo Frameworks & Design decisions
o Testing
• Conclusion and Future work
13Kailaash Balachandran
![Page 15: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/15.jpg)
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
![Page 16: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/16.jpg)
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
![Page 17: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/17.jpg)
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
![Page 18: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/18.jpg)
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
![Page 19: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/19.jpg)
Outline
• Organizational Challenges
• Fundamentals
• Existing toolso Comparison
o Missing Enhancements
• The Applicationo Frameworks & Design decisions
o Testing
• Conclusion and Future work
18Kailaash Balachandran
![Page 20: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/20.jpg)
Comparison of existing tools
Some popular card sorting
tools:
• UXSort
• Optimal Sort
• User Zoom
• Wecaso 1.0
19Kailaash Balachandran
![Page 21: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/21.jpg)
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
![Page 22: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/22.jpg)
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
![Page 23: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/23.jpg)
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
![Page 24: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/24.jpg)
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
![Page 25: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/25.jpg)
Comparison of existing tools
23Kailaash Balachandran
![Page 26: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/26.jpg)
Comparison of existing tools
24Kailaash Balachandran
![Page 27: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/27.jpg)
Comparison of existing tools
25
Today’s mobile trend:
• iOS
• Android
• Windows
• Blackberry
• Mobile Web
• …
Kailaash Balachandran
![Page 28: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/28.jpg)
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
![Page 29: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/29.jpg)
Comparison of existing tools
26
Today’s mobile trend:
• iOS
• Android
• Windows
• Blackberry
• Mobile Web
• …
Kailaash Balachandran
![Page 30: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/30.jpg)
Comparison of existing tools
27
Responsive Design:
Kailaash Balachandran
![Page 31: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/31.jpg)
Comparison of existing tools
28
Much needed enhancements:
• Responsiveness
• Hierarchical Sort
• Multiple Insertions of cards
• Multi-language support
Kailaash Balachandran
![Page 32: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/32.jpg)
Comparison of existing tools
29
An example for hierarchical nesting:
Kailaash Balachandran
![Page 33: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/33.jpg)
Comparison of existing tools
30
Much needed enhancements:
• Responsiveness
• Hierarchical Sort
• Multiple Insertions of card
• Multi-language support
Kailaash Balachandran
![Page 34: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/34.jpg)
Comparison of existing tools
31
Much needed enhancements:
• Responsiveness
• Hierarchical Sort
• Multiple Insertions of card
• Multi-language support
Kailaash Balachandran
![Page 35: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/35.jpg)
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
![Page 36: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/36.jpg)
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
![Page 37: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/37.jpg)
Outline
34
• Organizational Challenges
• Fundamentals
• Existing toolso Comparison
o Missing Enhancements
• The Applicationo Frameworks & Design decisions
o Testing
• Conclusion and Future work
Kailaash Balachandran
![Page 38: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/38.jpg)
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
![Page 39: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/39.jpg)
The Application
36
Dashboard view in Wecaso 1.0 :
Kailaash Balachandran
![Page 40: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/40.jpg)
The Application
37
Dashboard view in Wecaso 2.0 :
Kailaash Balachandran
![Page 41: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/41.jpg)
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
![Page 42: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/42.jpg)
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
![Page 43: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/43.jpg)
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
![Page 44: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/44.jpg)
Outline
41
• Organizational Challenges
• Fundamentals
• Existing toolso Comparison
o Missing Enhancements
• The Applicationo Frameworks & Design decisions
o Testing
• Conclusion and Future work
Kailaash Balachandran
![Page 45: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/45.jpg)
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
![Page 46: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/46.jpg)
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
![Page 47: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/47.jpg)
44
Demo !
Experiment Demo
Kailaash Balachandran
![Page 48: Implementation of a Web-Based Card Sorting Application with Responsive Design](https://reader033.vdocuments.net/reader033/viewer/2022051006/58ee25e31a28abcb1b8b45b9/html5/thumbnails/48.jpg)
Thank you. Questions?
45Kailaash Balachandran