1. Czech Technical University in Prague
Faculty of Electrical Engineering
BACHELOR THESIS
Web Content Aggregator for
Educational Purposes
Prague, 2013
Author: Vojtˇch Ciml
e

3. Acknowledgment
I would like to express my acknowledgement to thesis supervisor Ing.
Adam Sporka, for his remarks and opinions. He brought my attention to
user centered design and usability testing. I am also expressing thanks to
Tereza Horakova, who teached me how to prepare great design. My last
mention belongs to Vojta Drbohlav, who introduced me to Ruby on Rails
and Jan Moskalyk for taking part in the usability test.
i

4. ii

5. Prohl´ˇen´
as ı
Prohlaˇuji, ˇe jsem pr´ci vypracoval samostatnˇ a pouˇil jsem pouze pods
z
a
e
z
klady uveden´ v pˇiloˇen´m seznamu.
e
r z e
Nem´m z´vaˇn´ d˚vod proti uˇit´ tohoto ˇkoln´ d´ ve smyslu § 60
a
a z y u
z ı
s
ıho ıla
Z´kona ˇ.121/2000 Sb., o pr´vu autorsk´m, o pr´vech souvisej´ ıch s pr´vem
a
c
a
e
a
ıc´
a
autorsk´m a o zmˇnˇ nˇkter´ch z´kon˚ (autorsk´ z´kon).
y
e e e
y
a
u
y a
V Praze dne
podpis
iii

6. iv

7. Abstrakt
V t´to pr´ci se sezn´m´
e
a
a ıme a pop´seme n´sleduj´ ı t´mata. Reˇerˇe a
ıˇ
a
ıc´ e
s s
anal´za souˇasn´ch bookmarkovac´ a e-learningov´ch webov´ch aplikac´
y
c y
ıch
y
y
ı.
Design webov´ aplikace, kter´ umoˇnuje snadno organizovat a publikovat
e
a
zˇ
soubor webov´ho obsahu. Z´kladn´ implementace t´to sluˇby a jej´ zpˇ´
e
a
ı
e
z
ı rıstupnˇn´
e ı
online ˇirok´ veˇejnosti. Test uˇivatelsk´ pouˇitelnosti, kter´ odhal´ nes
e r
z
e
z
y
ı
dostatky. Nast´ ım tak´ pl´ny budouc´ v´voje.
ın´
e a
ıho y
Abstract
This thesis covers following topics. Research and analysis of current bookmarking and e-learning web applications. Design of web application, that
allows to organize and publish web content package in friendly way. Basic
implementation of such service and placing result online available to general
public. Finally carrying out test that helps to uncover usability issues. I will
also propose future plans.
v

8. vi

9. Contents
List of figures
ix
List of tables
xi
1 Introduction
1.1 Problem description . .
1.2 Objectives . . . . . . .
1.3 Requirements . . . . .
1.3.1 Functional . . .
1.3.2 Non-functional
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
1
1
2
2
2
2 Research and concept
2.1 Competition and other services . . . . . . . . . . . . . .
2.1.1 Glogster (http://www.glogster.com/) . . . . . . .
2.1.2 Prezi (http://www.prezi.com/) . . . . . . . . . .
2.1.3 TEDed (http://ed.ted.com/) . . . . . . . . . . . .
2.1.4 Google Art project (http://googleartproject.com)
2.1.5 StumbleUpon (https://www.stumbleupon.com/) .
2.1.6 Qwiki (http://www.qwiki.com/) . . . . . . . . . .
2.2 Selecting project name . . . . . . . . . . . . . . . . . . .
2.3 Selecting the right technology . . . . . . . . . . . . . . .
2.4 Detailed concept . . . . . . . . . . . . . . . . . . . . . .
2.4.1 The Player . . . . . . . . . . . . . . . . . . . . . .
2.4.2 The Editor . . . . . . . . . . . . . . . . . . . . .
2.4.3 Homepage . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3
3
3
4
5
6
8
8
9
9
10
11
13
15
.
.
.
.
19
19
19
19
20
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3 Implementation and final design
3.1 Technical basics and setup . . .
3.1.1 jQuery . . . . . . . . . .
3.1.2 RubyMine . . . . . . . .
3.1.3 Ruby on Rails . . . . . .
vii
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

10. 3.2
3.3
3.1.4 Pushing app online . . . . . . . . . . . . . . . . . . . .
Final design and implementation . . . . . . . . . . . . . . . .
3.2.1 The Player . . . . . . . . . . . . . . . . . . . . . . . . .
3.2.2 The Editor . . . . . . . . . . . . . . . . . . . . . . . .
3.2.3 Homepage . . . . . . . . . . . . . . . . . . . . . . . . .
3.2.4 Error page . . . . . . . . . . . . . . . . . . . . . . . . .
3.2.5 Profile page . . . . . . . . . . . . . . . . . . . . . . . .
Notable issues and fixes . . . . . . . . . . . . . . . . . . . . .
3.3.1 Postgres suddenly failed on Windows 7 . . . . . . . . .
3.3.2 oEmbed request refused because of Access-Control-AllowOrigin . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3.3 Google Web Fonts . . . . . . . . . . . . . . . . . . . .
3.3.4 JavaScript not working properly in IE . . . . . . . . .
4 Usability test
4.1 Introduction . . . . . . . . . . .
4.2 Preparation . . . . . . . . . . .
4.3 Collected data . . . . . . . . . .
4.3.1 Vojtˇch Ciml . . . . . .
e
4.3.2 Tereza Hor´kov´ . . . .
a a
4.3.3 Jan Moskalyk . . . . . .
4.4 Analysis and recommendations
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
22
23
23
27
29
33
34
36
36
36
37
37
39
39
40
42
42
43
44
45
5 Conclusion
47
5.1 Meeting objectives . . . . . . . . . . . . . . . . . . . . . . . . 47
5.2 Personal evaluation . . . . . . . . . . . . . . . . . . . . . . . . 47
5.3 Future work and improvements . . . . . . . . . . . . . . . . . 48
A Glossary of terms
A.1 Responsive Web Design .
A.2 TED . . . . . . . . . . .
A.3 JSON and JSONP . . .
A.4 Gamification . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
B Installation Guide
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
51
51
51
51
52
53
viii

11. List of Figures
2.1
Default box prompts you to drop video, but it is not possible
to do from your local folder. Instead you have to first upload
the video, then find it in glogster media container and finally
drop it to desired box, which I see as UX mistake. . . . . .
2.2 Editing Prezi . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3 TEDed design that includes today’s mayor trends . . . . . .
2.4 Google art gallery view . . . . . . . . . . . . . . . . . . . . .
2.5 Incredible detail, when zoomed . . . . . . . . . . . . . . . .
2.6 Course guide appeared as suitable name, but was already registered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.7 Typical US Highway traffic sign. . . . . . . . . . . . . . . . .
2.8 Guideler logo. . . . . . . . . . . . . . . . . . . . . . . . . . .
2.9 Concept of guider player . . . . . . . . . . . . . . . . . . . .
2.10 Very first sketches of guideler. . . . . . . . . . . . . . . . . .
2.11 First photoshop wireframe of Guideler.com homepage. . . . .
3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
3.11
3.12
.
.
.
.
.
4
5
6
7
7
.
.
.
.
.
.
9
10
11
13
14
16
RubyMine IDE offers variety of helpful features . . . . . . . .
Number of visits according to resolutions at SlidesLive.com . .
Design of player GUI for viewing guiders . . . . . . . . . . . .
Right upper navigation in GDocs . . . . . . . . . . . . . . . .
Right upper navigation in WordPress . . . . . . . . . . . . . .
Design of guider editor . . . . . . . . . . . . . . . . . . . . . .
Design of Guideler’s homepage . . . . . . . . . . . . . . . . . .
Homepage with login window rolled down . . . . . . . . . . .
Universal error page . . . . . . . . . . . . . . . . . . . . . . .
Profile page after you login . . . . . . . . . . . . . . . . . . . .
Managing your guiders . . . . . . . . . . . . . . . . . . . . . .
Do not forget to select which characters you would like to
include! For Czech support include Latin-Extended characters.
20
24
27
28
28
29
31
32
34
35
35
ix
38

12. 4.1
Curve showing the proportion of usability problems in an interface found by heuristic evaluation using various numbers
of evaluators. The curve represents the average of six case
studies of heuristic evaluation. . . . . . . . . . . . . . . . . . . 40
x

13. List of Tables
2.1
2.2
Base words for domain and available domains . . . . . . . . . 17
Table of widely used web building technologies . . . . . . . . . 18
4.1
4.2
4.3
Heuristic evaluation - collected data from Vojtˇch Ciml . . . . 42
e
Heuristic evaluation - collected data from Tereza Hor´kov´ . . 43
a a
Heuristic evaluation - collected data from Jan Moskalyk . . . . 44
xi

14. xii

15. Chapter 1
Introduction
1.1
Problem description
Textbooks are becoming irrelevant in 21st century education. Paper based
textbooks with hundreds of pages of plain text can cause pain and depression among most of the university students. It’s because, they are missing
typical benefits of electronic version such as search, context links and rich
media. Digital publishing industry is rapidly growing (especially in recent
months) and with the rise of tablets and eReaders, future of paper is uncertain. However in education industry, where innovations take place in slow
motion, we probably can not expect structured rich media digital version of
lecture materials anytime soon.
Another problem, student might be facing is that he can not see much of
a progress while he is reading. This Thesis will try to address these issues
and create a web-based solution. This solution will be low-end alternative to
expensive digital publishing technology.
1.2
Objectives
Purpose is to create online service allowing teachers, educators and individuals to create interactive guide through lesson or course. Multiple web sources
like blogs, pictures, videos, presentations or forms can be entered and organized inside editor to steps. Than final course guide will be published online.
Student taking course will see his progress thanks to system of questions and
answers at each step.
1

16. 2
CHAPTER 1. INTRODUCTION
1.3
1.3.1
Requirements
Functional
• Creating custom account
• Creating, editing and deleting own course guide
• Inputing multiple web links and organizing them into steps
• Adding knowledge testing to the guide
• Viewing final course guides
1.3.2
Non-functional
• Internet access
• Compatible with modern browsers
• HTML5 based
• Responsive design

17. Chapter 2
Research and concept
2.1
Competition and other services
2.1.1
Glogster (http://www.glogster.com/)
Glogster might be closest to what we want to build. It’s originally Czech
company co-founded by Roman Smola (Which I know in person) and is
currently global success. They call themselves #1 online learning tool in
the U.S. And several millions of users (Mostly students and teachers) are
prompting that it might be true. Their main revenue stream comes from
product Glogster EDU which is derivative of Glogster itself only aimed for
high-schools. Users are creating visual boards called Glogs and presents them
to teachers. In a way it’s indirect competitor to Prezi. To create a Glog you
can upload variety of media such as images, texts or videos and organize
them in virtual notice board.
But I see many opportunities what to improve. Currently (March 2013)
Glogster is using Flash as main technology for showing and editing Glogs.
I personally consider Flash as a great web platform, unfortunately with decreasing support. It’s performance and strength is especially online video.
For basic image transformations and layering, CSS and JS took over the
leadership.
Editing is too complex (See figure 2.1), and has many non intuitive features, such as Drag and Drop prompts, even though, Drag and Drop is not
possible in their Flash setup. Editing buttons are missing tooltips and meaning of layer buttons might be clear to Photoshop designer, but not to a high
school children. It creates many difficult situations and overall graphic design
and UX might be improved.
3

18. 4
CHAPTER 2. RESEARCH AND CONCEPT
Figure 2.1: Default box prompts you to drop video, but it is not possible to
do from your local folder. Instead you have to first upload the video, then
find it in glogster media container and finally drop it to desired box, which
I see as UX mistake.
2.1.2
Prezi (http://www.prezi.com/)
Prezi is innovative and leading presentation tool. With 20+ million registered
users 250+ million presentation views, they changed perception of traditional
presenting and PowerPoint. They came up with very interesting concept of
endless 2D workspace. You can input variety of web and local content and
organize it’s position, size. It takes some time to learn how entire editing
process works, but overall experience is good (See figure 2.2). Finally you
create presentation frames and connect them. Result is nice flyover effect
between each slides, which makes your presentation different.
I talked with Prezi sales manager Mike Sutherland via Skype. During
our conversation Mike emphasized many times, that Prezi team has now
very strong focus. Their goal is to create best presentation software on the

19. 2.1. COMPETITION AND OTHER SERVICES
5
market, so all other features and uses are now out of interest. Since Guideler
result should not be a presentation in front of a classroom, but more for home
studies, Prezi is not a direct competitor. As I will describe later in details,
Prezi inspired me in many ways. Especially endless 2D workspace.
Figure 2.2: Editing Prezi
2.1.3
TEDed (http://ed.ted.com/)
Readers of this document are probably familiar with TED (See glossary of
terms for details) conferences. With slogan “ideas worth spreading” and
hundreds of videos from these events they attracted many more millions of
viewers. TED was so successful, that local conferences called TEDx are now
being organized. Thanks to this brand and it’s partners ambitious project
called TED ED is now available online.
After research, facts indicates that TED ED is not as much about content
creation, but more about organizing that content using tags and flips. User
can find video on YouTube and create a lesson based on that. Add questions, “dig deeper” materials and discussion. General look and feel is great
and shows, that entire site was designed very carefully.
Design (Figure 2.3) contains today’s trends, which are:
• Large and spacious fonts, using Google Web Fonts directory, or safe
web fonts in order to be rendered by browser not in an image.
• Very clear navigation with small number of buttons. No multi-level
menus from 1990s websites at all. It is quite clear what action will
follow after each click.

20. 6
CHAPTER 2. RESEARCH AND CONCEPT
• Responsive web design. Video and menu is not only adapting browser
window instantly. There is JavaScript animation that causes video to
fly and resize to it’s new position.
• Lesson thumbnails are in high resolution to grab user attention.
Figure 2.3: TEDed design that includes today’s mayor trends
2.1.4
Google Art project (http://googleartproject.com)
This website is just amazing. World top paintings available in super high
resolution for free. You can browse each image and zoom to incredible detail
(See figures 2.4 and 2.5). I am writing about this web not because it is a
competitor, but it is design inspiration. Google is usually leading the way web
is created and Art Project is part of it. Smooth transitions and animations.
Dark color theme that is not harmfull to your eyes and complex navigation
elegantly reduced.

21. 2.1. COMPETITION AND OTHER SERVICES
Figure 2.4: Google art gallery view
Figure 2.5: Incredible detail, when zoomed
7

22. 8
2.1.5
CHAPTER 2. RESEARCH AND CONCEPT
StumbleUpon (https://www.stumbleupon.com/)
It was a long time ago, when I last visited StumbleUpon. And since then a
lot things changes. What you notice first is, that you can not do anything
without login. You can not browse or explore any showcases. Homepage is
super empty. Only Log In button in upper right corner and Start Exploring
call to action button. Which surprisingly, takes you to Login / Sign up page.
That is very interesting approach, that might look very brainless in the first
moment. But you have to realize, that Facebook did this exactly the same
way. Everyone was there, and to enter the exclusive content, you have to
join. If you are curious enough, like I was at the end fill out the form, or
login via Twitter, Google or Facebook ID.
It is really unfortunate, but I managed to broke my StumbleUpon.com
login. When I wanted to finally write about this website here in my thesis,
I clicked login via Facebook, since then my account is constantly returning
me to homepage and password reset and all other options do not work.
2.1.6
Qwiki (http://www.qwiki.com/)
I was tracking Qwiki for past 2 years and their product was really interesting.
Unfortunatelly they recently completely changed their service and focus. I
would not speculate why they did so. But I will describe their original service
in short.
Inside their editor, you could combine multiple web sources (Very similar
to guideler) add narration or video from webcam and publish it as qwiki that
anyone can view. Editing each step was not that easy and required all kind
of fields such as description, length etc...

23. 2.2. SELECTING PROJECT NAME
2.2
9
Selecting project name
Good name of the project is one of the keys to potential commercial success. First I used brainstorming technique to create some names and after few hours, I discovered very useful website (http://www.namemesh.com/
company-name-generator/) which helps you to generate names after entering keywords. So list was enriched by more candidates. See table XX for
final list of options.
Than it was time to verify available domain names. CZ domain was not
an option, since project is aimed to English speaking users and non-domestic
markets. International domain is required and .com would be ideal. As I
expected, most of the combinations were sold out. In table 2.1 red are marked
unavailable domains. After long thinking session I selected guideler.com as
the suitable name. Asked several of my friends, and most of them liked the
name. I bought domain and started working.
Figure 2.6: Course guide appeared as suitable name, but was already registered
2.3
Selecting the right technology
Selecting the right framework for building such web application can cause
significant decrease in programming time, costs of maintenance and future
scalability. After doing some research I found several technologies currently
used to create Web Applications (See table 4.3). I looked at their strengths
and weaknesses and selected the one that fit my needs. I decided to use
Ruby language, which was developed in mid 1990s by Yukihiro Matsumoto.
It has very interesting features and structure which combines multiple programming approaches (Imperative, functional, declarative, OOP) Ruby on
Rails often referred as Rails is Open Source framework build on top of the
Ruby language.

24. 10
2.4
CHAPTER 2. RESEARCH AND CONCEPT
Detailed concept
The initial concept of Guideler was sort of a map or assistant that guides
you through a course. I wanted to use traffic signs as an expression of certain
route that you are taking. I did research on US highway signs and discovered
interesting facts. Fonts and colors are standardized by FHWA, which stands
for Federal Highway Administration.
Figure 2.7: Typical US Highway traffic sign.
Font is Sans-serif based and is called Highway Gothic. It is not used
only in US, but Canada, Mexico, Australia, Spain, Brazil and many more
countries.
Background color for green highway signs is Pantone Green - 342, represented in HEX form as #006b54 and for yellow ones Pantone Yellow - 116,
#fcd116.
I used this when I was creating logo for the project. Result can be seen
at figure 2.8

25. 2.4. DETAILED CONCEPT
11
Figure 2.8: Guideler logo.
2.4.1
The Player
I called individual creations as guiders (Longer previous version is Guidelers).
Player is the component that can play guider when supplied with unique ID.
First idea was 2D space similar to Prezi, where user could zoom and drag
as desired. After playing around with CSS and JS for a while, it appeared as
not a good decision. (Prezi might have reason, why their editing and playing
is still flash only) CSS3 transformations simply behaved differently and not
correctly on variety of browsers.
{
transform: scale(2,2);
-ms-transform: scale(2,2); /* IE 9 */
-webkit-transform: scale(2,2); /* Safari and Chrome */
}
Example of simple CSS3 transformation (2.4.1), which should scale entire
div. However performance went down quickly, when div contained many
more containers with images or iframes.
After consulting with potential users, I found out, that this feature is
not must have and simpler might be even better. Instead of endless space,
guider is now divided into horizontal steps with fixed width, wider than
browser viewport width. All steps together are creating one wide div, that
can be dragged or moved by arrows or specific step number. Steps are kept
hidden and unloaded. When you move to certain step, next and previous
ones are preloaded and displayed. Thanks to this, animation can be kept
smooth.

26. 12
CHAPTER 2. RESEARCH AND CONCEPT
To ensure, that user will be engaged with the guider I added gamification
elements. Clear indicator of your progress (percentage or loading bar) is
present (Figure 2.10. The problem was how to measure this value. At first,
each step was equipped with tick button, which you would click, when you
feel that you are done. This method based on self-evaluation is obviously not
usable.
Secondly, some automatic analysis was option. After long hours of thinking and trying, I decided that it would be just too complicated to develop
reliable method of step finish recognition. (How can you recognize without
asking, that someone finished reading text)
I went through competition and research results again, and realized, that
simple multiple choice quiz might be best cost/value solution. If student
answers certain question correctly, step belonging to that question is marked
green and your progress will increase. Your progress is regularly and automatically saved, so you can return at any time from any device.
I believe that gamification concept can be extended with badges, sharing
to social networks and many other features. But it will not be covered in
this thesis.
Player should be responsive (Adaptive to multiple resolutions) and work
on multiple devices, especially mobile ones. Flash would be simpler for me,
thanks to my many years experience. Unfortunately Flash would not work
on mobile devices and has uncertain future. In this case, HTML5 is the
answer.

27. 2.4. DETAILED CONCEPT
13
Figure 2.9: Concept of guider player
2.4.2
The Editor
Key part is the editor, that enables those with the content to create guider.
I wanted to make creation process elegant and simpler than one at Glogster.
Compared with Glogster it will also be based on HTML5 not flash. Inside
glogster, you have to select what type content is. In Guideler, I want to build
universal field, where you can input any link and site would recognize what
content type it is. That means user is only copy-pasting links and do not
have to care about anything else. He might add question or notes, but it is
not required. So you might create visually attractive guider within few clicks
and seconds instead of exporting bookmarks and sending them via email.
One feature, that potential users were thinking of or were proposing to
me was Drag and Drop support. But not for entering images or videos, but
for entering links. Practically every modern browser has tabs, and most of
the users are browsing more than 2 tabs at the time. So dragging tab and
dropping it to editor’s link box would be useful. But I could not find any
way of doing this from the website itself. Only reasonable idea that came to

28. 14
CHAPTER 2. RESEARCH AND CONCEPT
my mind was browser extension, that would allow you to add some keyboard
listeners, or “add to guider” button on top of every tab. Such extension might
available as premium feature, and provide basic clue to business model. But
I recommend to build it only in case, that traffic of the site exceeds at least
few hundreds of users per week.
But with that comes a question, how to store and process the data. Option number one was to parse the URLs after they are entered and saved,
figure out what type of content or service it is and save service and it’s data
into database. But this approach has one significant disadvantage. Once
you add support for more services, you have to run through db and correct
all the data. Instead, I decided that storing just the links and parsing them
when view is requested will be better.
Figure 2.10: Very first sketches of guideler.

29. 2.4. DETAILED CONCEPT
2.4.3
15
Homepage
Homepage is critical to get traction. You have only few seconds to impress
user and create relationship. And few more seconds to explain him, what is
it all about and why he should care.
In first concept (See figure 2.11) I reduced navigation. You need to be
able to login, explore some guiders as an example and has ability to create
one. Nothing else is important at the beginning. Other pages such as pricing,
about, terms and conditions are for now unnecessary and can be added later
to the footer.
Texts in perfect english are important. After thinking, I entered “Textbook is super boring, endless stream with no checkpoints. Not with Guideler”.
If this goes into production, consultation with native speaker is recommended.
But you can see the general idea.
At least 2 or 3 example guiders will be created by me as a showcase.
These are placed on homepage and after single click you can play them
without saving progress functionality of course.
Very important is to have some kind of Call to action button (Buy now,
Try now . . . ). In this case, it is CREATE GUIDER button. Marked clearly
with significant color, it desires you to try it.
I wanted to keep homepage clear, and in this draft it is still not as clean
and clear as I wish. But as a concept, it is enough. As I wrote, homepage is
crucial at the very beginning. After you get some users, it is better to demonstrate what you do right on the product. At my other project SlidesLive.com,
over 70% of our traffic comes from external links and social networks. That
means, that users often do not cross the homepage at all!

30. 16
CHAPTER 2. RESEARCH AND CONCEPT
Figure 2.11: First photoshop wireframe of Guideler.com homepage.

31. 2.4. DETAILED CONCEPT
Base words
Education
Skills
Learn
Course
Guide
Navigation
Direct
Ability
Wisdom
Knowledge
Study
Teach
Materials
Earn
Map
Route
17
Names
courseguide.com
learnguide.com
tutorialguide.com
tutorguide.com
coursepath.com
courseroad.com
coursetrack.com
courseway.com
courseroute.com
studytrack.com
studyway.com
studyroute.com
learntrack.com
learnway.com
guide.me
guidemealong.com
guidemein.it
master.it
guidealong.it
guidein.it
destinator.com
rerouter.com
guideme.to
learnme.it
learnme.to
guide.at
mylearnguide.com
mystudyguide.com
skillguide.com
myskillguide.com
knowledgemaker.com
guidester.com
navidom.com
plantastic.com
learnabout.it
guideler.com
gourse.com
guidewy.com
Table 2.1: Base words for domain and available domains

32. 18
CHAPTER 2. RESEARCH AND CONCEPT
Language
PHP
Ruby
Java
Python
ASP.NET
JavaScript
Examined framework
Symfony
Ruby on Rails
GWT
Django
ASP.NET MVC
Node.js
Table 2.2: Table of widely used web building technologies

33. Chapter 3
Implementation and final
design
3.1
3.1.1
Technical basics and setup
jQuery
In this project I am using jQuery, which is open source JavaScript library
supporting most of current browsers. It makes programming a lot easier in
certain situation. You are using one code and do not care about browser
type in AJAX calls or events detection. It also makes manipulating with the
DOM a lot easier.
3.1.2
RubyMine
RubyMine is IDE for building Ruby on Rails web apps. It is developed
by JetBrains company (The one also responsible for IntelliJ IDEA). And I
definitely have to recommend this IDE, because it has some great features.
Basically, after installing Rails and RubyMine, everything can be done within
the IDE, generating new project, running IRB (Interactive Ruby Shell), Rails
console or bundler. Under tools it has shortcuts for generators (eg. for
migrations) and rake tasks. Very handy is, that RubyMine understands
relations between files and connects linked methods and variables. By just
one click you enter the file which contains desired method, without searching
it inside directory structure. It also has integrated Git and other Version
Control Systems. JetBrains gave attention to every detail, including catchy
dark color scheme saving your eyes. And, there is much more under the
hood.
19

34. 20
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
Figure 3.1: RubyMine IDE offers variety of helpful features
3.1.3
Ruby on Rails
I decided to describe folder structure in Rails project to avoid confusion,
when referencing any of these resources. Although purpose is evident from
folder names.
app
-assets - Here are all you CSS, JS files and also images on the site
-controllers - Controllers - nerve centre of application
-helpers - Place for simple methods (eg loops, ordering and formatting)
that you use in view, but inside view it self, they would
increase complexity. So you place them inside helpers.
-mailers - I haven’t used this folder yet, it is reserved for
mailing actions and views.

35. 3.1. TECHNICAL BASICS AND SETUP
21
-models - ORM representation of your data lies here
-views - All your templates, html or erb files belongs to here
config - Present probably at every modern web app, passwords,
db hosts etc...
db - Place for generated migrations and DB schema and seeds files
doc - Documentation
lib - Libraries, that should not be in vendor folder.
log - Rails prints error logs here.
public - There is one rule to remember, just keep this folder
as empty as possible.
script - Scripts for launching a web server or generating code
test - Every developer loves TDD, and here is the place
vendor - Here you include CSS or JS libraries from 3rd parties.
You should be also familiar with Gemfile. Gem is kind of external library
or module of ruby code that you can use in your project. And Gemfile is
index of those Gems, so each time you run bundle install or update, it runs
through Gemfile and fetches all gems and dependencies to your local storage.
Another key part of Rails, which is not common in other frameworks
is concept of Migrations and working with ActiveRecord interface to access
database. I think official guide explains benefits clearly
“Migrations are a convenient way for you to alter your database in a
structured and organized manner. You could edit fragments of SQL by hand
but you would then be responsible for telling other developers that they need
to go and run them. You’d also have to keep track of which changes need to
be run against the production machines next time you deploy.
Active Record tracks which migrations have already been run so all you
have to do is update your source and run rake db:migrate. Active Record
will work out which migrations should be run. It will also update your
db/schema.rb file to match the structure of your database.” (Cited from
http://guides.rubyonrails.org/migrations.html, Accessed: 10.5.2013)
And I am adding one example of typical procedure inside RubyMine.
Let’s say, that you have table Guiders and you want to add boolean table
column “published”. Go to Tools/ Run Rails Generator and begin typing
mig, autocompletion prompts migration, hit Enter and type name of your
migration, recommended in Hungarian notation, in our case “AddPublishedToGuiders”. Rails creates migration file, where you can define table change,
and in case of error also rollback behaviour. After writing few lines, migration
looks like this:

36. 22
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
class AddPublishedToGuiders < ActiveRecord::Migration
def up
change_table :guiders do |t|
t.boolean :published, :default => false
end
Guider.update_all ["published = ?", false]
end
def down
remove_column :guiders, :published
end
end
Now final step, actual change in database. In Tools click Run Rake
Tasks, and look for db:migrate, hit and wait few seconds. And that is it.
Your change took place and is saved for later use in production or anywhere
else.
I will not explain all other details about MVC and Rails, those can be
found at official Ruby on Rails guide very well covered. But by now, reader
should have basic idea how framework works.
3.1.4
Pushing app online
After doing quick research, I decided that Heroku is ideal hosting service.
They have well arranged documentation, positive reviews and a lot of answered questions on StackOverflow. What is also great, is that they provide
free tier for development, meaning I can develop and test everything without paying a single dollar. Of course free tier has limitations, that are not
acceptable for production. Dyno for example falls asleep when not active for
some time, and it takes several seconds to wake it up.
I am using Git to push entire repository to Heroku, and they do the rest
for me. It has a few prerequisites. First download Heroku Toolbelt (In my
case for windows) it adds Heroku commands to your command line. Open
CMD and go to the directory where you have the web app. Type heroku
login and proceed. (You have to select your SSH key). Once you solve
authentication it is time to connect your git repositories. Open heroku.com
in the browser, go to you app settings and add address to your repository.
Then return to the CMD and type

37. 3.2. FINAL DESIGN AND IMPLEMENTATION
23
git remote add Guideler git@heroku.com/Guideler.git
Now you are ready to push your code online with following command
git push Guideler master
3.2
3.2.1
Final design and implementation
The Player
Player is designed to be responsive. It is necessary that users with laptops and
small resolutions, reading materials for example in train will see everything.
With this constraint, websites had standard width of 960 pixels. But that
is inconvenient when you have FullHD monitor (1920px x 1080px) where
most of the space is unused. First solution, still used today, were to add nice
backgrounds and graphic, to make experience better. With the rise of mobile
and tablet devices, increasing number of sites is using techniques to deal with
this trend.There are so many very different resolutions these days, that it is
not surprising year 2013 was called the Year of responsive web design.
And the statistics agrees, these (Figure 3.2) are desktop resolutions divided according to number of visitors of SlidesLive.com (Another educational
portal) As you can see top 2 places are typical Laptops and FullHD monitors.
Let’s take a closer look at how responsiveness is implemented. Basic is
usage of relative units, meaning percentage or “em” instead of traditional
points and pixels. (em references current font size and multiplies it with
prefix number. So 2em considering 20px font will result in 40px). This does
not mean, that you should fully abandon pixels, you will still use them a
lot, but for key structural parts of the site such as menu wrappers, headers,
content columns etc... you should consider relative units. Also beware of
CSS box model, prompting, that width is not involving margin, padding and
border.
For example, if you want to have element with relative left padding, taking
entire width of the viewport, you have to subtract that padding from width.
#gl-questionWindow {
padding-left: 5%;
width:95%;
Otherwise, setting width simply to 100% would cause overflow and possibly negative side effects somewhere else in the document.

38. 24
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
Figure 3.2: Number of visits according to resolutions at SlidesLive.com
But the real issue was in individual steps with content. I had to ensure,
not only that content is always fully visible, but it corresponds to it’s aspect
ratio. Videos 16:9, Slideshare player close to 4:3, SlidesLive has wide 28:9.
And most methods of keeping aspect ratio using CSS only were not an option, especially when each content type is unique. I came up with following
solution.
Content fills 100% of it’s div. That div is equipped with class depending
on the content type. However that class is not present in CSS file, instead it
is generated by JavaScript along with proper dimension calculations. These
classes are then appended to the DOM’s special style tag. You might be
asking, why I generated classes when I could just modify content by jQuery?
You would have to loop through every div and assign proper values, using
class, browser does this for you.

39. 3.2. FINAL DESIGN AND IMPLEMENTATION
25
Snippet from JS counting dimensions and generating CSS class
var videoHeight = Math.round(viewportHeight);
var videoWidth = Math.round((16*videoHeight) / 9);
var cssHtmlString =’.gl-dynamic-videoAspectRatio{ width:’+videoWidth+’px;
height:’+videoHeight+’px;}’
$(’#gl-dynamic-classes’).html(cssHtmlString);
Application template contains empty style element
<style type="text/css" id="gl-dynamic-classes">
</style>
First design drafts also did not had question/answer or just contained
hint in form of a button, because I was not certain how to deal with it.
Multiple choice question to be visible takes quite a lot of space. It is not wise
to just add that container somewhere and squeeze it together in case of a
smaller resolution, also layout that will collapse into multiple columns is not
appropriate in this case. Instead, question will roll out as overlayed window,
similar to lightbox that is widespread. Custom styled radio inputs, placed
inside are offering better user experience than default styled tiny circle.
Very interesting part was integrating display of 3rd party content. As
I mentioned before, database stores only the links, and rest is done inside
Rails controller and player JS. YouTube and Vimeo is parsed using traditional
Regex.
Sample or Regex extracting unique Vimeo Video ID
parsing_link[/https?://(?:[w]+.)*vimeo.com(?:[/w]*
/videos?)?/([0-9]+)[^s]*/]
Some websites provide API called oEmbed. oEmbed is attempt for standardization of embedding content from other websites. You certainly know
the classic problem, there are so many URL combinations (old URLS with
params in query, rewritten paths to accounts, articles, embeds) that covering
all of them by Regexes is nearly impossible, and you have to track provider
for any future changes. That is where oEmbed introduces API standard,
where you can send request with URL parameter containing path to a resource, and you receive back JSON or XML representation of that resource.
Response usually contains html code for direct embedding, content title and
unique ID, if it has one. This is example of SlideShare request result:

40. 26
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
{
type: "rich",
slide_image_baseurl: "//image.slidesharecdn.com/110103quotes2010-12
-110103073149-phpapp01/95/slide-",
thumbnail_height: 128,
height: 355,
title: "Business Quotes for 2011",
provider_name: "SlideShare",
slide_image_baseurl_suffix: "-1024.jpg",
html: "<iframe src="http://www.slideshare.net/slideshow/embed_code/
6435157" width="427" height="356" frameborder="0" marginwidth="0"
marginheight="0" scrolling="no" style="border:1px solid #CCC;borderwidth:1px 1px 0;margin-bottom:5px" allowfullscreen
webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin
-bottom:5px"><strong> <a href="http://www.slideshare.net/haraldf/
business-quotes-for-2011" title="Business Quotes for 2011" target=
"_blank">Business Quotes for 2011</a> </strong> from <strong>
<a href="http://www.slideshare.net/haraldf" target="_blank">Harald
Felgner</a></strong> </div>",
provider_url: "http://www.slideshare.net",
version: "1.0",
width: 425,
thumbnail: "//cdn.slidesharecdn.com/ss_thumbnails/110103quotes2010
-12-110103073149-phpapp01-thumbnail.jpg?1294126271",
total_slides: 75,
author_name: "Harald Felgner",
version_no: "1294126271",
conversion_version: 2,
slideshow_id: 6435157,
author_url: "http://www.slideshare.net/haraldf",
thumbnail_width: 170
}

41. 3.2. FINAL DESIGN AND IMPLEMENTATION
27
Figure 3.3: Design of player GUI for viewing guiders
3.2.2
The Editor
Editor was one of the toughest parts. At the beginning there were dozens
ideas what user might be able to do. These ideas, when examined into details
explode into even more buttons, pop-ups and little hacks. Result is often GUI
that is not usable and nobody understands it even after several uses. Many
functions were crossed out and user should be able to do the following:
• Rename guider
• Add guider thumbnail
• Save guider
• Publish guider
• View all the steps
• Add guider step
• Paste, type or edit content link
• Add note to step

42. 28
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
• Turn on and off question to each step
• Fill in details of that question
• Change default look and feel template
But organizing these basic functions into understandable way was not
trivial. I did a research on services like Google Docs, WordPress or Joomla
sites and found out patterns, that users are used to.
Figure 3.4: Right upper navigation in GDocs
Figure 3.5: Right upper navigation in WordPress
Save, Share, Publish, Update and similar meaning buttons are usually
present in Right upper corner. (Figures 3.4 and 3.5)
The top bar is dedicated to guider properties - name, thumbnail, save,
publish. Under this bar is container with all the steps and a place for other
buttons like changing template (Brush in figure 3.6). Layout has 2 main
columns, left one for entering link and right one for optional question. Question can be turned on and off by highly visible switch. It is multiple choice
with fixed 3 answers, it might be limiting user, but it allows simple one-page
editing. Compared for example with TEDed where creating single question
is quite a long process with many screens.

43. 3.2. FINAL DESIGN AND IMPLEMENTATION
29
Editor is using AJAX, which allows to load and save data without refreshing the page. Data are exchanged in JSON format and on special routes
processed by Ruby controllers. Route ”/api/edit guider/” is used for saving
in a form of POST request with JSON array containing all the data. Controller verifies, if user is authenticated and has the right to save the data.
I also implemented automatic saving after one minute, but after few talks
with users I removed it. I figured out, that there is small number of browser
crashes and other events, where autosave is handy. Accidental closing of
browser tab is a risk, and for that exists window.onbeforeunload method,
that you can use to display confirmation dialog. You may know this dialog from closing tab with unfinished email. Guider editor does not support
any version history, or undo feature, so there are lot of cases, where you
want to discard changes, you have made. Because of this, autosave is not
implemented.
Figure 3.6: Design of guider editor
3.2.3
Homepage
As I wanted at the beginning, homepage is clear and shiny (See figure 3.7).
Header contains slogan - “message” and call to action yellow button at the
hottest place of the website. In the content area there is single image that

44. 30
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
visually explains what and how is Guideler doing. But still, most of the users
might not get the point and for them, there are displayed top guiders, that
might be picked by the site owner or according to number of views.
I also proposed Login window (See figure 3.8), which rolls out from the
top and offers you not only to Login but also Sign Up directly from the
homepage without redirecting to some other page. People do not want to fill
long registration forms today, and even those 3 fields are too much. (Account
name, Email and Password) So for the most comfortable users, there is Sign
Up with Facebook, which is today very common way of authentication on
the web.

45. 3.2. FINAL DESIGN AND IMPLEMENTATION
Figure 3.7: Design of Guideler’s homepage
31

46. 32
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
Figure 3.8: Homepage with login window rolled down

47. 3.2. FINAL DESIGN AND IMPLEMENTATION
3.2.4
33
Error page
It is common that error occurs, whether it is a code failure, missing data or
just wrong URL input from user. However treating errors is often underestimated and on many websites you just see provider’s or browsers default page
such as 500 Internal Server error, 404 Not found etc...
Also it is difficult to design and implement for each error custom page
and explanation, so I designed one universal error page (See figure 3.9). It
is obvious to the user that it belongs. It’s functionality is limited and might
be extended in the future, but it communicates message clearly.
I would like to add here few more details on the implementation side,
since other developers might spend appreciable time, searching for solution.
For detecting errors like wrong URL, unauthorized access you will mostly
use if statement. For database errors I recommend to use StatementInvalid
and RecordNotFound exceptions.
rescue ActiveRecord::StatementInvalid
redirect_to show_general_error_path(:error_code => 103)
rescue ActiveRecord::RecordNotFound
redirect_to show_general_error_path(:error_code => 104)
end
Where:
redirect to show general error is name of your route (and controller
method)
path must be added for framework to recognize your intention
(:error code =¿ 104) is parameter passed to the url query.
It is definitely better to pass error code instead of message itself and
resolve message in the controller. Since you might want to translate errors
in another language, and URL has no problematic characters to be escaped
and is more esthetic for the user.
You might also search for POST method parameters passing instead of
simple GET that requires error code parameter inside query. But HTTP/1.1
prohibited redirect using POST method. For details visit http://www.w3.
org/Protocols/rfc2616/rfc2616-sec10.html

48. 34
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
Figure 3.9: Universal error page
3.2.5
Profile page
In this part of the website, user can view his profile, make common changes
such as password reset. And he is able to create and manage his guiders.
Again, there is no need to fill space with unwanted content. I am trying to
serve people what they want and not annoy them with tons of features that
are used by fraction of users. Once you login (See figures 3.11 and 3.11), you
see Welcome screen with “How it works”.

49. 3.2. FINAL DESIGN AND IMPLEMENTATION
Figure 3.10: Profile page after you login
Figure 3.11: Managing your guiders
35

50. 36
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
3.3
3.3.1
Notable issues and fixes
Postgres suddenly failed on Windows 7
I am quite new to Postgres, so not used to all variety of errors. So It was
surprise that I couldn’t login from Rails and even from pgAdmin, constantly
returning error that server is not listening.
Connection refused (0x0000274D/10061) Is the server running on host ”localhost” and accepting TCP/IP connections on port 5432
After searching, this solution worked for me. Start / cmd and type services.msc. Display the list, find postgres, right click and start. Check in
properties, that it is set to start automatically as you turn on the computer.
Despite these facts, Postgres together with Rails is running perfectly
smooth compared to experience with Symfony and MySQL (Which had constant problems with PDO drivers)
3.3.2
oEmbed request refused because of Access-ControlAllow-Origin
If there is one security issue, you will see over and over again, it is AccessControl-Allow-Origin. Usually, it can be fixed by adding . htaccess file to the
server, which allows different domains to access the resource. But when using
embed and accessing 3rd party resources or content, you can not simply add
htaccess file to their server. To my surprise slideshare did not allowed this
cross-domain communication when requesting their oEmbed API.
But you can deal with this situation by adding little detail to your code.
If using jQuery, add jsonpCallback parameter (you do not have to do anything in that function) and change dataType from json to jsonp.
Snippet showing oEmbed AJAX request that is Cross-Origin Resource
Sharing valid
$.ajax({
type: ’GET’,
url: externalData,
async: false,
jsonpCallback: ’jsonCallback’,
contentType: "application/json",
dataType: ’jsonp’,
success: function(data) {

51. 3.3. NOTABLE ISSUES AND FIXES
37
console.log("success");
},
error: function(e) {
console.log("error");
}
});
For more details about JSON and JSONP go to Glossary of Terms (Appendix A)
3.3.3
Google Web Fonts
This is very trivial issue, if you already have experience with it. But when
I came across this first, I spent afternoon detecting the problem. Google
WebFonts library is great, you are no more limited by 13 or so Web Safe
Fonts. If you plan, that your site will support additional languages and
special characters, selecting a font is little more careful. So I found a font,
that displayed text in Czech Language, pressed USE button and copy pasted
code into my CSS. But Czech characters were still not showing up. I triplechecked database, erb files coding and all other options to find that mistake
is in code from Google. You have to add subset parameter to that URL if
you want additional characters like extended latin (Figure 3.12)
<%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=
Open+Sans:400italic,400,700,300&subset=latin,latin-ext" %>
3.3.4
JavaScript not working properly in IE
When it comes to JavaScript, there is one thing, I would like to mention. It
might happened, that all your JS is working fine on Chrome or Firefox, but
IE (Surprisingly!) seems totally broken. Reason for this is, that you forgot
to remove console.log somewhere in your code, or you are using it for debug
information. Remove all occurrences, and refresh the page, I believe that
will fix many troubles.
It is because IE console object is available only when developer console
is open. And even if you close that console, it remains accessible until you
close the tab. That might be reason, why it always worked when you were
trying to detect the errors, but was broken in the production.

52. 38
CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN
Figure 3.12: Do not forget to select which characters you would like to include! For Czech support include Latin-Extended characters.

53. Chapter 4
Usability test
4.1
Introduction
World today is producing more information than ever. Consider quote from
Google’s former CEO Eric Schmidt - “There were 5 Exabytes of information created between the dawn of civilization through 2003, but that much
information is now created every 2 days.” In this information overload, it is
increasingly difficult to distinguish between value and noise. Key to succeed,
get user’s attention and encourage them to return is User-centered design,
which mean clear interface that is intuitive to use. In other words, if target
user does not perform task, he wanted, it is your mistake.
There are many methods how to perform usability test. For example
Cognitive walkthrough, Heuristic evaluation, Test with user or A/B Testing.
I decided to use Heuristic evaluation, because it is cheap and relatively quick
method how to find usability problems. It requires experts in field, that
are separately investigating the design and looking for problems. Number of
experts is usually between 2 and 8, since ratio of discovered issues is growing
logarithmically (See figure 4.1)
39

54. 40
CHAPTER 4. USABILITY TEST
Figure 4.1: Curve showing the proportion of usability problems in an interface found by heuristic evaluation using various numbers of evaluators. The
curve represents the average of six case studies of heuristic evaluation.
(Source: http://www.nngroup.com/articles/
how-to-conduct-a-heuristic-evaluation/, Accessed: 10.5.2013)
4.2
Preparation
I decided to involve in the test me and two other persons. Tereza Hor´kov´,
a a
Art director at SlidesLive.com and Jan Moskalyk, entrepreneur and creator
of educational content for diabetics.
We will use following 10 Usability Heuristics according to Jakob Nielsen,
proposed in 1995.
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards

55. 4.2. PREPARATION
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
Each expert will also assign criticality of the issue.
1. Critical problem, must be removed soon.
2. Should be fixed.
3. Look and feel or nice to have issue.
41

56. 42
CHAPTER 4. USABILITY TEST
4.3
Collected data
4.3.1
Vojtˇch Ciml
e
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
Bar with individual steps should be adaptive according
to number of steps. Small number has too much empty
space, large number is overflowing.
Error prevention
Make div element adaptive
2
I as a developer would miss open API to create my own
mashups and apps on top of guider.
Consistency and standards, User control and freedom
Create open API
3
Inside editor, user might expect drag feature, allowing
him to change order of the steps. Like inside powerpoint
Flexibility and efficiency of use, Consistency and standards
Implement this capability
2
Because both player and editor opens inside new tab
without some kind of universal website menu, it is not
clear how to return.
User control and freedom, Visibility of system status
Add some navigational elements
1
Table 4.1: Heuristic evaluation - collected data from Vojtˇch Ciml
e

57. 4.3. COLLECTED DATA
4.3.2
Tereza Hor´kov´
a
a
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
At homepage, I would expect video how it works, that
is present inside my account page.
Help and documentation
Add video to homepage
2
I would not be sure how to go back from the editing.
Because it opens in new window, and there is no close,
or return button
User control and freedom, Visibility of system status
Add ”go back” buttons
1
I am missing some kind of a preview, because at first I
had no idea how the resulted guider looks like.
Visibility of system status
Add preview button and functionality.
2
After answering several questions, I went back, but it
did not remember my answer.
Recognition rather than recall
Mark the answered question, when returning
1
Table 4.2: Heuristic evaluation - collected data from Tereza Hor´kov´
a a
43

58. 44
CHAPTER 4. USABILITY TEST
4.3.3
Jan Moskalyk
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
Issue
Heuristic
Fix
Priority
When watching and switching to other steps, transition
was too slow
Flexibility and efficiency of use
Make animation faster
2
From the image at the homepage I am not sure how
exactly Guideler works. I would expect more details or
better explanation
Match between system and the real world
Maybe better analogy with other service, ideally not IT
realted.
3
When creating guider, I was not able to reorganize steps
easily. I had to cut and paste links and texts
When creating guider, I was not able to reorganize steps
easily. I had to cut and paste links and texts
Implement this feature
1
I was often clicking on the icons under the link field.
Expecting some action, nothing happened
Visibility of system status
Add some explanation, what happened
2
Table 4.3: Heuristic evaluation - collected data from Jan Moskalyk

59. 4.4. ANALYSIS AND RECOMMENDATIONS
4.4
45
Analysis and recommendations
As I expected, we detected many issues, and I believe there are many more
to come. And the reason is, that Guideler is new project that I am building
from scratch. So it is not probable, that you make everything perfect at first
attempt. And usability testing is not about single test, but about loop. It
is not a task, but a continuous process. You have to make constant changes
in order to move forward. Since some of the issues were repeating, or were
similar, I would start fixing them first. In the future, I would also like to
implement A/B testing on the site that in my opinion provides much better
results than heuristic evaluation.

60. 46
CHAPTER 4. USABILITY TEST

61. Chapter 5
Conclusion
5.1
Meeting objectives
Make a survey of the current e-learning platforms. Identify their common
features and weaknesses. Learn the state of art of social bookmarking services such as stumbleupon.com, delicio.us, which enable the users to share
and discuss generic content resources.
I successfully searched for competition and analyzed their strengths and
weaknesses. This task was completed.
Design and implement a combination of a social bookmarking service and
an e-learning platform which allows anyone to assemble an annotated sequence of links to existing resources (web sites, vidoes, sound files, ...) that
can be used as an on-line course with study material as well as particular
tasks allowing the users to verify their knowledge and skills.
Product was designed and minimum viable product was realized and is now
available online at http://guideler.com/ Design can be seen at figures 3.3,
3.6, 3.7, 3.8, 3.9, 3.10 and 3.11 or in High Resolution at enclosed CD.
Perform a usability test of the implemented system.
Usability test was performed and details are described in chapter 4.
5.2
Personal evaluation
What I consider as a great success, is that I managed to get this project
up and running from scratch. Coming up with the idea, making a research,
do the design, implement a solution, put it online and document the whole
process in one person is difficult. Sure, there are lot of mistakes, unfinished
design and overlooked details that might be improved. Usability test helped
me to reveal some of those. I am dedicated to continue improving this so47

62. 48
CHAPTER 5. CONCLUSION
lution and I am very excited about the future of this project. This Thesis
enhanced my skills to learn new things quickly, justify my opinions and findings and examined my capability of writing work in English. It is a great
experience.
5.3
Future work and improvements
There are many opportunities that could be tapped.
User should have an option to upload material directly. If you have a
PDF document, you have to first upload it to slideshare and then paste a
link inside guideler. That is inconvenient, and direct upload, which would
forward that document to SlideShare automatically and filled in the link is
beneficial feature.
Concept of gamification together with proper emailing could be developed further. That requires study of user psychology and other factors that
encourages you to return and finish guider that you were watching. That is
closely related to well designed emails that are sendet at the right time, with
the right words.
After years of experience, I can say, users will often not fill anything.
And that is true even if that data would help them to reach their target
audience. In this situation, computer should do the job for you. Automatic
analysis of entered links could help categorize each guider and deliver it to
the right user. So musicians would see guiders how to compose new tracks
and astronomers would be supplied with pictures and videos of stars.
No project can last long in isolation. So letting now potential partners and
customers about existence of this website and developing relationship with
them is crucial. I can name TEDed initiative or Pulse content aggregator.
These might provide valuable insight that helps to decide right direction of
another development.

63. Bibliography
[1] Douglas Crockford. Discovering javascript object notation with douglas crockford. http://www.youtube.com/watch?v=kc8BAR7SHJI, Accessed 18.5.2013.
[2] Jakob Nielsen. How to conduct a heuristic evaluation. http://www.
nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/,
Accessed 18.5.2013, 1995.
[3] Jason Fried, David Heinemeier Hansson. Restart. Jan Melvil
Publishing, 2010.
ˇ
[4] Josef Slerka. Gamifikace a ˇirˇ´ kontext. http://slideslive.com/
s sı
w/38889586, Accessed 18.5.2013.
[5] Oded Ezer. 21st century design. http://slideslive.com/DE.SIGN/
w/38888926, Accessed 18.5.2013.
[6] Steve Krug. Webdesign - Nenuˇte uˇivatele pˇem´ˇlet!
t
z
r ys
Press, 2006.
[7] The Author Collective.
Rails guide.
rubyonrails.org/, Accessed 18.5.2013.
49
Computer
http://guides.

64. 50
BIBLIOGRAPHY

65. Appendix A
Glossary of terms
A.1
Responsive Web Design
Is webdesign technique allowing users to view content on many devices with
different resolutions without scrollbars or zooming. It uses CSS3 Media query
and JS feature detection to adapt website layout. Generally, you use 2 or
3 layouts (For desktop, mobile and tablet) with relative units - percentages,
not pixels.
A.2
TED
TED is a nonprofit devoted to Ideas Worth Spreading. It started out (in
1984) as a conference bringing together people from three worlds: Technology, Entertainment, Design. Since then its scope has become ever broader.
Along with two annual conferences – the TED Conference on the West Coast
each spring, and the TEDGlobal conference in Edinburgh UK each summer
– TED includes the award-winning TED Talks video site, the Open Translation Project and TED Conversations, the inspiring TED Fellows and TEDx
programs, and the annual TED Prize.
(Cited from https://www.ted.com/pages/about, Accessed: 10.5.2013)
A.3
JSON and JSONP
JSON stands for JavaScript Object Notation and was proposed by Douglas
Crockford. It is data-interchange format that is easy for humans to read and
easy for machines to parse or generate. It is language independent.
51

66. 52
APPENDIX A. GLOSSARY OF TERMS
JSONP is JSON with padding, that allows to bypass Same Origin Policy.
Forcing browser to to execute callback function passed in the URL parameter.
A.4
Gamification
Gamification means use of game mechanisms in non-gaming enviroment. It
is not a game, and it is not describing how game looks like. It transmits
gaming tricks to engage and motivate users to certain actions. Or to modify
their behaviour.

67. Appendix B
Installation Guide
First, I would like to point out, that the code stored on CD is probably
out of date by now. For latest version, please clone Git repository from
https://github.com/wojtaw/Guideler. CD also contains installation files
for Ruby, Rails, RubyMine, PostgreSQL and Github. All of these are for
Windows 64-bit computer, and might require internet connection or update.
Make sure that your computer has Ruby and Rails framework installed
(Version 3.2.13 and above). For Windows and Mac users I recommend to use
RailsInstaller which includes all necessary dependencies. (Download from
http://railsinstaller.org/)
Than copy or clone files into your working directory and run RubyMine.
Select File/Open Project and search for the directory. Once IDE finishes
opening, it is time to update Gems using bundler. Choose Tools/Bundler/Update.
Guideler is using PostgreSQL Database, so you need to install that one
too. If you did so, either create new user (postgres with password postgres)
or provide custom DB login in config/database.yml file. Note, that you are
not suppose to create a DB schema or table, Rails will do it for you! Choose
Tools/Run Rake Task and select db:create and right afterwards db:migrate.
This will create all tables for you and you are ready to go. Now run rails
server (Run:Development) open browser and type localhost:3000. You should
see Guideler’s homepage.
53