The ubiquity of digital information has changed the way how users consume data on various devices. On the web, usability has become a necessary condition for survival of any application. One of the crucial factors in usability is that the information presented don’t get haphazard and chaotic as it could negate user experience. Taking an example of a web application, the most common problem encountered by users was in locating and navigating to desired content. To overcome this, usability experts emphasize on the need to adapt to a user-centered design approach to better understand user expectations. In this thesis, the popular design technique known as Card Sorting is discussed and implemented as a web application. The design of the application is made mobile-friendly in order to flex to multiple displays on various devices and the result exported can be fed to Casolysis or similar tools for evaluation.

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