Skip to content

Blog 3 – “DotA 2 Hub”

One of the final task of the semester is to design a website about something I like, the website I have decided to make is a simple ‘Dota 2’ information hub that has guides, hero information, item information and a forum. ‘DotA 2’ is a free-to-play ARTS/MOBA game created by Valve, the game has multiple ‘heroes'(units) that you can choose from which utilize many items to make the ‘hero’ stronger while fighting it out with players against players.

Target Audience
‘DotA’ 2 is a game which has a huge player base and within the player base there are different levels of players, this website is aimed at new players of the game and average-skilled players. The website will be made with easy navigation with most of the content to be one click away from the index page, this allows new and moderately-skilled players to access information on items quickly when they are looking for a quick look up. The website will be multilingual and interchangeable to cater for major languages.

‘DotA’ 2 is played globally and played by people of all ages, it is not limited by sex. Although a lot of the information on the website will be available through the ‘DotA 2’ client, this will allow for players to look up information if they are not on their computer which has DotA 2 installed and check out guides while they are out and about. Specifically speaking we’re targeting gamers aged 12-35.

As stated above, the website is designed to be easy to navigate. This allows information to be accessible quickly off the index page, if they want additional information a few more clicks will take them to where they want.

DotA 2 - New Page

Users are able to navigate the whole website from any page of the website using a global navigation bar. On the index page it will have ‘Latest News’ which will generally be just latest DotA 2 news, everything else will be 1-click away. Navigating the pages which have a high amount of data (Heroes, guides and Items), users will be able to use a search function to close in on exactly what they are after – the website supports polyhierarchical browsing.

Wire frames
I have included some wire frames below to give you a better understanding of how the website will look like and how the navigation will be used, specifically the ‘index page’, ‘heroes page’, ‘guides’ and ‘about us’.

Index Page wireframe

Index Page wire frame

A index page which has a slider which transitions after a set time, has basic information about the latest news and a side bar with newest guides, heroes and items if there are any. Ability to navigate the website on all pages thanks to the global navigation bar.

About Us Wireframe

About Us wire frame

  A standard information based page which allows the users to get an understanding of the website if they wish to read about it, otherwise it just explains the websites and its purpose.

Heroes page wire frame

Heroes page wire frame

Heroes page has side bar functionality, allowing heroes to be categorized and searched easily. There are many heroes in the game of DotA 2, which is why splitting into categories is a must.

wireframe4Guides use a Google-look-a-like results page, for familiarity, guides are categorized to the left just like heroes which allow for easy searching.

Controlled Vocabulary
Here are a list of Accepted terms and variant terms for my controlled vocabulary, this allows for results to be shown for certain things even if the accepted term wasn’t used (using the variant term instead). Very useful to have and is used in search engine optimization.

Accepted Term Variant Term(s)
Hero Champion, Character, Unit
Health Life, hp, Hitpoints
Mana Energy, Rage, mp, Mana points
Creeps Monsters, Mobs, Minions
Strength Tank, Melee, Bruiser
Shop Secret Shop, Outpost, Base shop
Roshan DotA Baron
Intellegence Caster, Magic User, Control
Agility ADC, Carry, Assassin
Jungle NC, Neutral, Woods
Gold Money,
Mid Middle, latif

Below  is my Metadata Matrix.

Vocabulary Description Examples Maintenance
Heroes A character with unique abilities Dragon Knight, Tidehunter, Shadow fiend medium
Items Items used to boost the capabilities of a hero Daedalus, Butterfly, Ultimate Orb, Force Staff medium
Hero Type The primary stat of a hero Strength, Agility, Intellegence low
Creeps Units that can be killed on the map which provides gold Neutral Creeps, Summons, Lane Creeps low
Skills Skills are abilities that heroes use Normal skills, Ultimate low
Page Type Type of site page Information, Guide, Forum low
Author Author of the guides Thomas, John, Dendi high
Audience Audience visiting site Favourite guides medium


Creative blog title about Labelling navigation items

Sorry for the lack of creativity of the blog title first and foremost, in this blog I’ll be analyzing a website I frequent to get information about the Korean entertainment industry. The website in question is none other than allkpop, below is a screenshot of the website.


Here is a table displaying the websites navigation items and how they are labeled.

Label Destination’s Heading Label Destination’s Label
A allkpop | Breaking K-pop news, videos, photos and celebrity gossip
News allkpop | Breaking K-pop news, videos, photos and celebrity gossip
Features Features Features | allkpop
Shop Shop Shop | allkpop
Forums Forums Forums | allkpop
Register Register
Login Login

I just want to point out, that the website has recently gone through redevelopment and the navigation isn’t 100% completed (mainly just new things they are added to the website). Anyways on with the questions.

Firstly the ‘News’ label was kind of redundant on the main page, the front page of the website is the news page. I can see that if you are navigating through to other pages it might be of use but you can also click the giant ‘A’ located to the top left hand side (pretty much on all websites) to get back to the home ‘News’ page. The labels are not 100% clear if you’re not a frequent visitor to the website, I suggest making the labels more visible in terms of making them a button or an icon at least to draw attention to them.

The labeling  was consistent on all pages in terms of style, presentation and style. Pretty much the navigation area of the website (top header area) never changes throughout the website.

c) Examine at least two other similar or competing websites. How similar are the labeling systems? is any one site clearly the winner (and if so, why?)


The competitor website that I checked out is soompi, a website I use to frequent until I found allkpop. The labels are generally the same with maybe soompi having more ‘working’ labels than allkpop, that being said soompi’s navigation has 2-levels. Soompi has two forum labels which are not that far from each other, just a bit redundant, although it is a lot more clear where the labels are and they indeed do work.

In my opinion there is no clear winner, soompi wins in regards to labels that work and visibility(presentation) but allkpop wins in the style category. What are your thoughts? leave a comment and don’t make fun of my interest in Korean entertainment industry :).

Alphabetical, Numerical and ASCII ordering

In this blog I have been tasked to arrange the follow list of information (book titles and locations)

  • El Paso, Texas
  • Saint Nicholas, Belgium
  • The Lord of the Rings
  • Newark, New Jersey
  • XVIIme siècle
  • .38 Special
  • St. Louis, Missouri
  • New York, New York
  • 1001 Arabian Nights
  • The 1-2-3 of Magic
  • Albany, New York
  • #!%&: Creating Comic Books
  • The Hague, Netherlands
  • $35 a Day Through Europe
  • H20: The Beauty of Water
  • Plzen, Czech Republic

With some help from the internet my list in proper ordered list is:

  1. #!%&: Creating Comic Books
  2. $35 a Day Through Europe
  3. .38 Special
  4. The 1-2-3 of Magic
  5. XVIIme siècle
  6. 1001 Arabian Nights
  7. Albany, New York
  8. El Paso, Texas
  9. H20: The Beauty of Water
  10. The Lord of the Rings
  11. New York, New York
  12. Newark, New Jersey
  13. Plzen, Czech Republic
  14. Saint Nicholas, Belgium
  15. St. Louis, Missouri
  16. The Hague, Netherlands

Question regarding the ordering of my list:

Did you put The Hague under T or H?
Since The Hague is the name of a city, I put it under T (did not omit ‘The’).

Did you put El Paso under E or P?I placed El Paso under E because it is also a city.

Which came first in your list, Newark or New York?
New York came first, the take the space as a character that goes before the letter a.

Does St. Louis come before or after Saint Nicholas?
Although St. is the abbreviation for Saint, I have placed St. Louis after Saint Nicholas. Only because of the formatting of the word it is after (t is after a).

How did you handle numbers, punctuation, and special characters?
Special characters I looked up a ASCII table and looked up their hexadecimal values and ordered them by that, then punctuation then numbers.

Assuming the italicised terms are book titles, what might be a more useful way to organise this list?
The are too many book titles that begin with ‘The’, and usually on most websites that are databases for titles they omit ‘The’, it will usually look like this ‘Lord of the Rings, The’.

If the cities represent places you’ve visited and the book titles are ones you’ve read, how could chronology be used to order the list in a more meaningful way?
I would group the books and cities separately keeping the order I have them in at the moment. Keeping them separate maybe have an indicator or a gap between the books and cities, of course books would come first because ‘b’ comes before ‘c’.

If you’ve read this far I commend you, but I’m fairly sure everyone will have similar list :).

What exactly does ‘Information Architecture’ involve?

First off I’d like to state that information architecture is a vital part of development in a website. All the websites that you frequent have some form of information architecture done on them, placement of objects, images and videos are all carefully thought about to give users maximum usability. There is also a lot of thought put into accessibility issues (think blind people using a website), tags being put on images, navigation being intuitive,  text-to-speech reader compatibility and the amount of information placed in one location.

Not only does it deal with the design of the front end of the website, it also includes organization of the back end. We’re talking about properly developing databases, keeping libraries organized and just making everything easily to find and accessible(edited/updated/reusable). Making code reusable, easy to find and editable are also characteristics of information architecture.

Here are two pieces of simple code I have, just a simple CREATE in SQL with formatting with proper commentating vs no formatting at all with no commentating.

code with formatting

Code with some Information Architecture thought


Remembering that this is just one table of twenty tables that I have for my database, which would you rather have to look through to edit and see what it does?

The Web 3.0

So the Web 3.0 isn’t far off from being implemented, we can already see technology gathering information about you and suggest things to you (think Facebook and Google ads). Web 3.0 is sometimes described as a personal assistant (for search engines), you will be able to type a proper sentence asking for multiple things and the search engine will be answer this sentence. This would make searching for things easier and faster, Web 3.0 is about having web technologies understanding what you want and what you’re thinking and giving you the relevant information.

As far as privacy goes for the the Web 3.0 (semantic web), what if the government makes it their right to be able to access all the information the semantic web has about you. Especially with the NSA stuff that is occurring in USA at the moment, spying on people who might be suspicious based on information that can be gathered on the web. What if this information fell into the wrong hands, for example your ex-girlfriend who decided to stalk you and gain this information to make your life a living hell by appearing at the places you frequent.

There could be benefits with government and law enforcements gaining personal information, chat logs and other important information, but when will it go too far. It ‘could’ make the world a safer place, but there are always be people who would object to having their information monitored. This just comes down to everyone being responsible for what they put on the internet, Facebook already stores a lot of information about you including your chat logs. Regarding privacy your use of the technologies and how much information you are willing to disclose onto the internet will affect how useful Web 3.0 will be.


Facebook – The datamining machine

So the social network of choice to go through terms and services is…

Facebook.facebook privacy

I’m not the biggest fan of social media sites, but I have created a Facebook account about 1 and a bit years ago to keep in contact with relatives from overseas. Since the creation of the account I have kept posting on it to a minimum and mainly using it as a messenger service (think MSN messenger).

Just recently there was a security bug which exposed personal account information, phone numbers and emails. This bug affected 6 million accounts, the bug in particular allowed users to gain contact details and information of people who were not their friends but had a connection to them (read more here).

On with the question, how will Facebook use your information? Well according to their Data Use Policy:

  • They use the information about us to display advertisement which might be relevant to our interest.
  • To protect Facebook’s or others’ rights or property
  • To provide us with location features and services
  • Make suggestions to us (friends, tagging, etc)

They also say they will not use any of your information unless they have received permission (which is in your settings), given you notice and they have removed your name or other personally identifying information from it. (source)

When there is a breach in security what I found was with the recent security bug, Facebook had their security team fix the bug within 24 hours to mitigate the damages. In reality in the terms and conditions it states that you are responsible for keeping your password secure. All in all it’s pretty much the same for any account I have but since I have minimal personal information up on Facebook, even if I am ‘hacked’ they wouldn’t be able to grab any important information that is not already public about me. I am fine with Facebook.

Feeding the Feedly

As promised from my last blog for the last couple of days I have been using the ever so popular Feedly, recommended by many other people in the course and the fact that I have never used a feed reader before.

Let’s get to it, first off all it allows for most of the websites that I frequent to all be accessed from one website. A couple of the websites that i frequent have recently gone through some website reconstruction and do not have ‘feed’ activated yet. Feedly has a clean UI and the view choices for reading the articles are quite nice, it allows me to format the articles in a way that is simple (I recommend the magazine view).

A feature Feedly has allows for you to create your own categories for which articles from multiple websites will appear, this goes back to what I said earlier about everything being on one website.

Feedly organise tab

A look at Feedly’s Organize tab for category’s

A disadvantage which I mentioned earlier was that if websites do not provide a feed, not allowing for you to add them to your Feedly. This meaning you would have to go visit the website, making the whole point of having a feed reader less useful (let’s be honest now though, most news websites and newer websites are created with feeds being provided).

Another disadvantage I found when I first added new content to my Feedly, all the articles would be unread (which could easily be fixed by mark all as read). That being said I had forgotten about using my Feedly and when I came back I had a bunch of articles from all my categories which I had read and hadn’t read since I had just been doing my browsing normally (probably my fault). Maybe consider using it or not but as for myself I can see the usefulness and efficiency of a feed reader but I also do not mind going to various websites to get my news for the day.