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


• Fundamentals




o Testing



Organizational Challenges

The Idea of Categorization



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



One could order books

by:

• genre

• author

• size

• favorites

• …



Library Classification

Systems:

• Dewey Decimal

• Library of Congress

• Universal Decimal

• …



But, the case of organizing digital data is different

from physical items.



www.uni-paderborn.de

Research Applicant Prospective Student



www.uni-paderborn.de

Changes in usage

context….

Research Applicant Prospective Student



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?



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

make sense to our site visitors..



Solution:

Gather perspectives of all

users to design the

information architecture.

“Card Sorting”


Outline


• Fundamentals




o Testing



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) “


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


Fundamentals

Sort Methods:

• Flat Structure

• Hierarchical Sort

Variants:

• Closed: Cards and categories are predefined.

• Open : Cards are predefined. Participants are

allowed to create categories.


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


Outline


• Fundamentals




o Testing



Comparison of existing tools

Some popular card sorting

tools:

• UXSort

• Optimal Sort

• User Zoom

• Wecaso 1.0



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







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



22

Much needed enhancements:

• Responsive Design


• Multiple Insertions of card

• Multi-language support

Goal of this thesis



22 a


• Responsive Design




Goal of this thesis







25

Today’s mobile trend:

• iOS

• Android

• Windows

• Blackberry

• Mobile Web

• …



25


• 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



26


• iOS

• Android

• Windows

• Blackberry

• Mobile Web

• …



27

Responsive Design:



28


• Responsiveness


• Multiple Insertions of cards




29

An example for hierarchical nesting:



30


• Responsiveness






31


• Responsiveness






32

?





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



33





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


Outline

34


• Fundamentals




o Testing



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


The Application

36

Dashboard view in Wecaso 1.0 :


The Application

37

Dashboard view in Wecaso 2.0 :


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


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


Testing

40

3. User Tests

• Beta test was conducted

successfully

• All reported bugs were fixed

• Log data was monitored throughout

the test session.


Outline

41


• Fundamentals




o Testing



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.


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


44

Demo !

Experiment Demo


Thank you. Questions?
