Designing a Website

For my final blog, I'll be designing a website called 'Mathematics and Such'. The website will have tutorials for learning about different subjects of math; forums for discussions; and an equation evaluator which shows graphs, alternate forms, and other pertinent information, all of which aim to teach and help people with mathematics. So, getting started; the first step towards creating a website is identifying the  target audience.

Demographic

The demographic for the website is broad, but the site mostly pertains to teaching, so we'll start with the people being taught. A student is typically between 5 and 30, of any gender, from any location in the world, and from any socio-economic background, but tending towards the low-middle class. Students are a very broad demographic, but are mostly accessing the site for a single reason: help with schoolwork. This might involve something simple, like double-checking homework; for this, graphs and alternate forms of equations might be useful. But a student newly learning a particular topic might not be familiar with all of its concepts and would need verbose textual and graphical explanations as well as examples and exercises, and even a place to discuss the subject if they need help. They might also be unfamiliar with some of the symbols, so a list of commonly used symbols and their meaning and use would also aid. Also, older students would tend towards more advanced subjects, so the writing style of explanations should reflect that.

Then there are the teachers; they're aged 25+, and are towards the middle of the socio-economic spectrum. Teachers, like their students, would typically access the site for help with schoolwork. They might be checking the forums for whether students are cheating, checking a student's working, or checking the working of their lecture slides. A teacher is typically familiar with their field and wouldn't need much help in that regard, however students may have misplaced or misused some symbol, so as before, some sort of symbol lookup-list would be helpful.

There are also the parents of the students; they're aged 18-60, of either gender, and their socio-economic background is similar to their children's. A parent would also be accessing the site for help with schoolwork; mostly when they're unsure of some homework question and looking at the website with their child. It's likely that the parent will already be familiar with the more simple material, so it's probable that they're only needing information on more advanced material which they've yet to learn, or a reminder of material which they have covered, but have forgotten.

There's also professionals; ex-students who've chosen a career in mathematics. They're 20+, towards the higher end of the socio-economic spectrum, and typically male. They're likely very familiar with their field and are merely double-checking their work, or helping others on the forums. Having said this, it might have been a long time since their education, and they may need to be refreshed on subjects with which they're unfamiliar; as it's only a refresher, it would be preferable for the explanations to be short but informative.

Finally, there's the general public; they don't fit into any particular demographic, and each member of the public has their own skill level and use for the website. One of the most likely reasons for them visiting the site is for help with some every-day task, such as counting interest on their bank loan, in which case there should be simple results, with plenty of graphics. They could also be researching some topic of interest; if they are, they'll likely be in an inquisitive mood, so explanations should be short and simple, with links to other related, or even unrelated subjects.

Blueprint

The above blueprint shows how a user might navigate the site; they'll enter at the landing page (the black box titled 'Home Page'), where they'll find a navigation bar. The website utilizes global-navigation, so the nav-bar will be present on any particular page of the website.

The 'Search' function will check whether the search terms are in a mathematical format; if they are, the results will be generated from the 'Calculate' section, and the equation (and alternate forms) will be searched for in threads and tutorials. Otherwise, it'll use index terms to find tutorials pertinent to the general subject of the search. The 'Random' link takes the user to a random tutorial. The 'Calculate' area of the site allows for input and returns graphs and alternate forms of equations. It also links to pertinent threads and tutorials by searching for the equation in alternate forms. The 'About Us' and 'Home Page' pages are static and don't necessarily link to the other sections, apart from via the navigation bar.

The 'How-to' area of the site provides tutorials. It's contextual, as it might link to other tutorials within its explanation, and related tutorials and threads will be advertised. Also, some of the explanations will redirect to the 'Calculate' area, for the results of equations and graphs and such. Within the 'Forum' section, users will have discussions on math-based subjects; users may create new threads, or even add new subjects, so the 'Forum' section of the site is bottom-up. Users may link to other sections within a thread, and other threads and tutorials are advertised based on context.

The website is bottom-up, as new content is added by users as required. The global navigation system acts to separate the different sections of the site, and the current section will be highlighted in the nav-bar to provide locational context. It's expected that a user will spend an equal amount of time in each section as pages inter-link between sections; having said this, each page belongs to a single section, so the website is mono-hierarchical.

Wireframes

Now let's look through some of the different sections of the website:

Home Page

There's the navigation bar at the top which is present throughout the site. Just below it, there's an input box with a button next to it labelled 'Calculate'; someone intending to calculate something will likely be in a rush, and will certainly expect to find their results more quickly than someone searching through threads and tutorials, so I've placed the 'Calculate' input on the homepage to streamline their searching. Below that are some general news articles and other interesting links.

Calculate

After entering something to calculate, some generated information will be returned, such as the graph of a function, alternate forms, and so forth. There are also several links to threads and tutorials relating to the search.

Search

After entering a search term in the nav bar, information will be taken from several different areas of the site; a graph will be generated via the 'Calculate' section if possible, and some links to tutorials and threads will be displayed, along with their summary.

How-to

Once you've found a tutorial, there'll be an article explaining the subject, as well as some graphs generated by the 'Calculate' section and any other links the author might include. Some related tutorials and threads will also be displayed at the bottom of the page to provide further reading on the subject.

Controlled Vocabulary

Accepted Term	Variant Terms
Tutorial	How-to Lesson Teach Guide Instruction Direction
Mathematics	Math Maths
Forum	Thread Board Discussion Congregation
Calculate	Evaluate Equal Graph Equate Result

Navigation Systems

The Griffith Homepage

For this week's blog, I've chosen to assess Griffith.

More specifically, its navigation bar.

Link’s Label	Destination’s Heading	Destination’s <title>
Navigation Bar
Future students	Future students	Future students – Griffith University
Current students	Students	Students – Griffith University
Staff	Staff Services and Resources	Staff Services and Resources – Griffith University
About Griffith	About Griffith	About Griffith – Griffith University
Research	Research	Research – Griffith University
Alumni	Development and Alumni	Development and Alumni – Griffith University
Other Links
Griffith Portal	Griffith Portal	Griffith Intranet Portal
Contact us	Contact us	Contact us – Griffith University

Now to enumerate the issues – to start, the colour of the navigation bar, the placement of its elements, and even the text within the search box are all different depending on the area of the site.

The ‘Griffith Portal’ seems to be a completely different website; it omits the navigation bar, and the <title> doesn’t follow the standard ‘[site area] – Griffith University’ structure which is generally consistent across most of the site.

Some of the naming is a bit spotty, ‘Alumni’ changes to ‘Development and Alumni’, ‘Staff’ to ‘Staff Services and Resources’, ‘Current Students’ to just ‘Students’. More pedantically, the ‘S’ in ‘Future students’ is lower case, but the ‘G’ in ‘About Griffith’ is capitalised.

Griffith has a few discrepancies, but the nav bar and headings are relatively consistent and logical throughout. Some work could be done towards improving consistency, but for the most part the labels get their destination’s purpose across.

QUT

The QUT nav bar

I’ll also assess the navigation bars of some competing sites. I’ll start with QUT.

Link’s Label	Destination’s Heading	Destination’s <title>
Navigation Bar
Study	Study	QUT – Study
Research	Research	QUT – Research
Industry	Industry and partnerships	QUT – Industry and partnerships
About	About	QUT – About
Alumni	Alumni	QUT – Alumni
Giving	Giving	QUT – Giving
International students	International Students	QUT – International Students
Other Links
News	News	QUT – News
Jobs	?	QUT | Jobs at QUT
Library	Library	QUT | Library
Contact	Contact	QUT – Contact
Current Students	Student gateway	Home – QUT Students
Current Staff	Staff gateway	Home – QUT Staff

At a glance, it seems QUT is more consistent in its navigation bar; the only name change is ‘Industry’ being changed to ‘Industry and partnership’, which is forgivable given the new name adds important information but would be too long to fit in the nav bar.

The discrepancies start to show in the ‘Other Links’; with ‘Jobs’, ‘Library’, ‘Current Students’ and ‘Current Staff’, the <title> structure changes. Even the nav bar changes across these particular areas of the site; some of the elements change to be more pertinent to the current area of the site. Current Students, for example, displays information regarding enrolment and fees.

The majority of the nav bar is consistent; it’s mostly the ‘Other Links’ which need work. While the changes in the nav bar might be confusing if you forget which area of the site you’re on, they generally go towards streamlining the experience. The most inconsistent area of the site is the ‘Jobs’ section, which looks like a completely different website.

QUT is pretty good; the nav bar doesn’t change amongst any of the main links in the nav bar, and the headings are logical and consistent. One of the main issues with QUT is the change in the nav bar in some of the ‘Other Links’, although it does aim to streamline a user’s experience, and so might prove beneficial.

UQ

The UQ nav bar

And finally, we get to UQ.

Link’s Label	Destination’s Heading	Destination’s <title>
Navigation Bar
ABOUT	About UQ	About The University of Queensland, Australia
NEWS	UQ News	UQ News Online – The University of Queensland
FUTURE STUDENTS	Courses and Programs	Courses and Programs – The University of Queensland, Australia
UQ JOBS	UQ JOBS	UQ Jobs – The University of Queensland, Australia
TEACHING & LEARNING	Teaching & Learning at UQ	Teaching and Learning at UQ – The University of Queensland, Australia
RESEARCH	Research at UQ	Research at UQ – The University of Queensland, Australia
ALUMNI	Alumni & Community	Alumni – The University of Queensland, Australia
INTERNATIONAL	UQ International	UQ International – The University of Queensland, Australia
Other Links
CONTACTS	UQ Contacts	Contacts – The University of Queensland, Australia
SEARCH	UQ Search	UQ Search Home
STUDY	Courses and Programs	Courses and Programs – The University of Queensland, Australia
MAPS	UQ Maps	UQ Maps – The University of Queensland, Australia
NEWS	UQ News	UQ News Online – The University of Queensland
EVENTS	UQ Events	UQ Events, The University of Queensland
LIBRARY	UQ Library	Home Page | UQ Library
MY.UQ	Current Students	my.UQ Student, The University of Queensland

There seems to be no convention to the <title> or the page’s heading. Some of the links are redundant; the ‘News’ link in ‘Other Links’ is the same as the one in the ‘Navigation Bar’. Moreover, the nav bar changes between pretty much every page. Take the ‘FUTURE STUDENTS’ section as an example.

The nav bar is different; however it displays more pertinent links, which aim to streamline the experience. The heading is ‘Courses and Programs’ which is a completely different naming convention. Furthermore, take note of the ‘UQ JOBS’ section.

The nav bar has changed again; moreover, even the heading font has changed. ‘UQ’ is more graphical than it is on any of the other pages which also have ‘UQ’ in their heading.

UQ, is generally inconsistent. Their nav bar is different for every area of the site. As with QUT, one might argue that the inconsistencies in the nav bar are to facilitate a streamlined user-experience. Having said this, most of the issues are due to carelessness – not abiding by a titling structure, for example; often, the heading labels aren’t the same as the link leading to the page.

Summary

The labelling systems of the sites vary; they talk about the same subjects, but lead you through them differently. UQ for example focuses on subsections of the current area of the site, while both Griffith and QUT tend to show broad areas with links therein.

I'd have to conclude that out of the three, QUT is the victor. While Griffith remains consistent, barring some 'special' areas such as the Griffith Portal, most of its inconsistencies seem unintentional. UQ is far too sporadic to be considered, and while QUT is also inconsistent in some areas, it's typically intentional and aims to aid navigation.

Information Architecture

Users will tend to avoid websites which have poor layouts, or which are hard to navigate. An Information Architect seeks to avoid such problems by organising and structuring content such that it is simple to navigate and easily accessible.

One e-commerce company found that its poor layout was proving quite costly; through usability tests, it found that many customers didn’t complete their purchase because they had to register to the site beforehand. After changing the checkout process so that registration wasn't required, there was a sizable surge in revenue, so much so that it's now referred to as the ‘$300 million button’.

People mostly notice poor information architecture; something which is poorly structured, such that information is inaccessible. Similar to a house without a toilet, a user will get frustrated if they can't find something they're looking for on a website, which will hinder their attitude towards the site. Good information architecture involves clear labelling, logical and consistent navigational structures. Good information architecture sits in the back of people’s minds; it gives the user the confidence that as they navigate the site, they edge closer to what they’re searching for.

Collation

A key part of Information Architecture is logically organising content, which is referred to as collation; to do so, you need to know when to arrange something alphabetically, chronologically, or by some other order. Context is a key part of deciding the order of a list; even when organising something alphabetically, there’s ambiguity as to what goes where. Take the following list as an example:

ASCII Code Chart

• 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

There are some things to think about when ordering a list alphabetically:

• Should you put ‘The Hague’ under ‘T’ or ‘H’? Typically, you would omit words like ‘The’ or ‘A’ when ordering a list, but in this case it’s a part of the name and so should probably be included.
• Likewise, would ‘El Paso’ be under ‘E’ or ‘P’? ‘El’ is Spanish for ‘The’, so it should probably be treated similarly. Normally, it'd be omitted, but again, it’s part of the name; people likely wouldn’t search for ‘Paso’ when they mean ‘El Paso’.
• A more difficult question is whether to put New York before Newark. Does the space count as a character? Alphabetically, not counting spaces or capitals, ‘Newark’ would come first. However, the order would probably depend on the context; if I were enumerating a list of places in the world, doing it by hand would be time-consuming, so I would probably be using some kind of automated process. As such, I would probably use some character set such as ASCII; in ASCII, both the space and ‘Y’ come before ‘a’, so ‘New York’ would come first.
• Does ‘St.’ come before or after ‘Saint’? ‘St.’ is an abbreviation of ‘Saint’, so should they be ordered as the same word? It’s hard to decide, and again depends on the context. I would probably order ‘St’ as ‘Saint’, as uniformity is key in organisation. As such, St. Louis would come before Saint Nicholas.
• How are numbers, punctuation and special characters handled? What’s their order? Are they counted at all? I would use the characters’ ASCII values; that way, I could write a program to alphabetise the list for me.

Having considered all of this, here is my interpretation of the alphabetised list:

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

If the italic elements are books and the rest places, the list could be separated to display the different context between the elements. Moreover, if the places are those which I’ve visited, and the books are those which I’ve read, chronology could be used to order the list(s). Chronologically ordering the lists would let you see at a glance what happened most recently, what's happened furthest in the past, and the order of events. This would reduce the ambiguity inherent with alphabetisation and would also give a personal meaning to the list.

There are more rigid and uniform methods of alphabetisation; this document details a technical standard for Unicode collation.