Implementation of a Web-Based Card Sorting Application with Responsive Design

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

Outline

• Organizational Challenges

• Fundamentals

• Existing toolso Comparison

o Missing Enhancements

• The Applicationo Frameworks & Design decisions

o Testing

• Conclusion and Future work

2Kailaash Balachandran

Outline

• Organizational Challenges

• Fundamentals

• Existing toolso Comparison

o Missing Enhancements

• The Applicationo Frameworks & Design decisions

o Testing

• Conclusion and Future work

3Kailaash Balachandran

Organizational Challenges

The Idea of Categorization

4Kailaash Balachandran

Organizational Challenges

Okay…so what’s the big deal about it?

4Kailaash Balachandran

Organizational Challenges

One could order books

by:

• genre

• author

• size

• favorites

• …

5Kailaash Balachandran

Organizational Challenges

Library Classification

Systems:

• Dewey Decimal

• Library of Congress

• Universal Decimal

• …

6Kailaash Balachandran

Organizational Challenges

But, the case of organizing digital data is different

from physical items.

7Kailaash Balachandran

Organizational Challenges

www.uni-paderborn.de

Research Applicant Prospective Student

8Kailaash Balachandran

Organizational Challenges

www.uni-paderborn.de

Changes in usage

context….

Research Applicant Prospective Student

9Kailaash Balachandran

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

Organizational Challenges

I’m pretty sure I know how to organize content that will

make sense to our site visitors..

11Kailaash Balachandran

Organizational Challenges

Solution:

Gather perspectives of all

users to design the

information architecture.

“Card Sorting”

12Kailaash Balachandran

Outline

• Organizational Challenges

• Fundamentals

• Existing toolso Comparison

o Missing Enhancements

• The Applicationo Frameworks & Design decisions

o Testing

• Conclusion and Future work

13Kailaash Balachandran

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

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

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

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

Outline

• Organizational Challenges

• Fundamentals

• Existing toolso Comparison

o Missing Enhancements

• The Applicationo Frameworks & Design decisions

o Testing

• Conclusion and Future work

18Kailaash Balachandran

Comparison of existing tools

Some popular card sorting

tools:

• UXSort

• Optimal Sort

• User Zoom

• Wecaso 1.0

19Kailaash Balachandran

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

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

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

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

Comparison of existing tools

23Kailaash Balachandran

Comparison of existing tools

24Kailaash Balachandran

Comparison of existing tools

25

Today’s mobile trend:

• iOS

• Android

• Windows

• Blackberry

• Mobile Web

• …

Kailaash Balachandran

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

Comparison of existing tools

26

Today’s mobile trend:

• iOS

• Android

• Windows

• Blackberry

• Mobile Web

• …

Kailaash Balachandran

Comparison of existing tools

27

Responsive Design:

Kailaash Balachandran

Comparison of existing tools

28

Much needed enhancements:

• Responsiveness

• Hierarchical Sort

• Multiple Insertions of cards

• Multi-language support

Kailaash Balachandran

Comparison of existing tools

29

An example for hierarchical nesting:

Kailaash Balachandran

Comparison of existing tools

30

Much needed enhancements:

• Responsiveness

• Hierarchical Sort

• Multiple Insertions of card

• Multi-language support

Kailaash Balachandran

Comparison of existing tools

31

Much needed enhancements:

• Responsiveness

• Hierarchical Sort

• Multiple Insertions of card

• Multi-language support

Kailaash Balachandran

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

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

Outline

34

• Organizational Challenges

• Fundamentals

• Existing toolso Comparison

o Missing Enhancements

• The Applicationo Frameworks & Design decisions

o Testing

• Conclusion and Future work

Kailaash Balachandran

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

The Application

36

Dashboard view in Wecaso 1.0 :

Kailaash Balachandran

The Application

37

Dashboard view in Wecaso 2.0 :

Kailaash Balachandran

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

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

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

Outline

41

• Organizational Challenges

• Fundamentals

• Existing toolso Comparison

o Missing Enhancements

• The Applicationo Frameworks & Design decisions

o Testing

• Conclusion and Future work

Kailaash Balachandran

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

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

44

Demo !

Experiment Demo

Kailaash Balachandran

Thank you. Questions?

45Kailaash Balachandran