Sunday, 22 September 2013

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

Translate