Blog 3 – Information Architecture Design of a Corporate Web Site

Question 1.

Audience’s Characteristics

The website that I am intending to publish through Drupal by the end of the session is based on my personal interest i.e. tourism. The website will be based on Australian tourism and will be called VisitAustralia.

As is obvious by the nature of the website, the audience is comprised of a large spectrum i.e. it will include people of all ages and backgrounds who plan to visit Australia and can get all the required information about different tourist locations beforehand. But as anticipated, the audience will primarily be families; married couples which can be of age 18+ and so on. Basically anyone who wants to know about Australian cities and attractive locations will be using the website. As stated earlier, people of both genders will be accessing this website before planning their trip to the beautiful country.

At the same time, since it is an educational/information website, the website is intended to be made as simple as possible so that it is easier for the user to find and navigate through all the desired information without much of a hassle. But if we talk about the socio-economic background, people having medium or middle class background are more likely to visit this website much since they tend to plan their tours in advance.


Question 2.

Website Blue-prints

The website consists of several similar pages which tell the user about the information of different tourist attractions in different cities. On opening the website, the user gets to the Homepage which tells the user some basic details about Australia and the content of the website. The rest of the pages are mostly about different cities and locations along with the About Us and Contact pages.

A basic sitemap or blue-print of a website shows the structure of the website. Or in other words, it shows the relationship between pages i.e. what is accessible from where in the website. Moreover, it shows the collection of all the pages that are intended to be in the website along with their hierarchy within the website.

The sitemap or the blue-print of the website will be as follows:

untitled-diagram-1
Sitemap

As seen in the sitemap above, the arrows are all bidirectional which means that the user can go from any webpage to any other webpage using the global navigation inside the website.

Starting from the Homepage, a user can see the city-wise details i.e. the history and the tourist spots in that city. The hierarchy of pages is set such that the user can go to any page directly from the homepage as well as there is the option of going step-by-step.

Moreover, the Search option can be accessed from anywhere in the webpage too.

Form of Navigation:

The form of navigation used in the website is Global navigation since we want the user to be able to go to any page. There is not much need of local navigation since I want the information to be accessible to the user from everywhere. Moreover, the use of contextual navigation might be used as needed.

Search strategy:

Since this is a static informational website, the focus is mostly on the display of the pre-gathered information to the user. The user will see all the relevant information there is about certain locations. However, I have included the option to search for different locations and cities. Using the index matching search within the website, in search results user will see the relevant cities and/or locations along with their pictures and relevant textual information.

Organization of the site:

The organization scheme used in the site is subjective i.e. can be classified as an Audience website since the purpose is to spread awareness.

The organization structure is based on the top-down approach, mostly hierarchical i.e. the user can view the hierarchy of cities and the places to visit in those cities will appear under separate cities.


Question 3.

Website Wire-frames

The design of the website is pretty straightforward i.e. the pages are mostly just texts and images therefore the following wire-frames show the basic outline of the homepage and a couple of other pages. The pages show the logo and the navigation structure as well.

11

Homepage Wire-frame

The first wire-frame, as shown above, is of the Homepage. On opening the home page, the user gets to see the introduction to the country of Australia and the basic outline of what the website has to offer to view. As we can see in the wire-frame, the site uses both horizontal as well as the sidebar navigation. User can choose the locations city-wise where further information is being shown as a hierarchical structure.

222.jpg

Places Wire-frame

 

The second page as shown above is the Places to go page which shows the user the most famous places in Australia that should be visited. Even though, the wire-frame is showing four images, there may potentially be much more images in the website. The rest of the structure is the same for the page.

33

Search Wire-frame

As for the third wire-frame is concerned, this one shows the search results which will be based on the input text entered by the user in the upper right corner search-box of the website. Now, this search box is available all across the website as it is a part of the global navigation. Therefore, the user will be able to get to this page from any other page.


Question 4.

Website Metadata Matrix

The website has static information about different cities and their famous locations so the metadata is mostly comprised of cities and their details such as names and descriptions. Therefore, the maintenance is mostly straightforward.

The metadata matrix is given below:

capture

Site Metadata

If we look at the material in the website, we will figure out that most of the information is straightforward, therefore the metadata is not that broad and complicated. However, in case of user search there are some terms like he might search for a city that he already has heard about or the places that are famous. In case of such words, the system will have a collection of locations stored in the system already. And in case, it is not able to find the word in the system vocabulary, it might ask the user if he is looking for a city or some certain location inside a city.

Moreover, the list of accepted vocabulary terms used in the website are as follows:

capture

Website Vocabulary

The above list of vocabulary terms helps define the range of words and is helpful in assessing site’s common terms used throughout.

If we talk about the overall design of the website, it can be concluded that the design is considered to be as simple as possible. The primary reason for that is the fact that I want the user to be able to access the information as feasibly as possible. User does not have to try to figure out what means what in the website and to ensure that, all the vocabulary and text used in the website is in plain words. Moreover, the navigation is designed in such a way that the user can access anything from anywhere inside the website. The images are primarily in the relatively large thumbnail forms, however the full size images can be accessed when the user opts to see the full page or the description of a location or city.

This is an informational website and the primary Audience is people from different regions and from different age groups. Therefore, the access of information has to be made easy for the average user. In the sitemaps and wire-frames above, I showed the basic or minimized functionality of the website. The sitemap just showed the pages for three cities and one tourist location in each city. However, in the website I am intending to include more cities and tourist locations to increase the amount of information the user can get out of the website. Moreover, the wire-frames show just four images in the Places to go section but the plan is to incorporate more images than that. The search also shows just three results in the wire-frame but hopefully, the spectrum of results returned to user’s queries will be made more relevant and broad.

Though I am still working on some of designs. However, I am looking forward to update the full scale site on Drupal soon!

Advertisements

Blog 2 – Information Architecture Critique of Web Sites

Question 1.

Information Architecture

The definition of Information architecture states that it “is the structural design of shared information environments; the art and science of organizing and labeling websites, intranets, online communities and software to support usability and find-ability” [1].

In the context of websites, the concept of Information architecture simply means what is being shown in a website and how the content is organized all across different pages of that website. It is the art of making sure it is feasible and easy for a user to find whatever he/she is looking for on the website. It also acts as the road-map or blue print of any website design which helps the developers understand what is expected of the website and how to implement it in order to showcase the information to the users. The following is an image which depicts how the sitemap of a website is designed under the development of its information architecture.

info-architecture.png

Information Architecture Pattern

Role of an Information Architect

Now that we know what an Information Architecture is, we can easily put some light on the role and importance of an Information Architect during the design and building of a website. An Information Architect is basically a person who not only outlines the design of a website but also acts a liaison between the design and technical teams of a project. He is the guy who is in charge of proper organization of information, along with the responsibility of making sure the technical team is implementing the designs correctly.

He oversees the following tasks primarily:

  • Research about the anticipated audience
  • Outline of navigation and hierarchy of the webpages
  • Organization of content and labels

Moreover, an information architect is also in charge of the development of wire-frames and site-maps which are discussed in some detail below:

Wire-frames:

A wire-frame is one of the most important part of an information architecture and is basically the layout of different key webpages showing which elements will appear on them and where. It is designed to let the technical team know the exact visual appearance that is to be required on the website. A typical wire-frame looks something like this:

home

Information Architecture Pattern

Site-maps:

Site-maps are hierarchical diagrams that exhibit the structural and navigational designs of the whole website. They are based on the concept of taxonomy (grouping similar elements under same tags) and are deemed necessary to ensure the right content is placed at the right structural position i.e. where the user expects to find it. They basically show the relationships between different pages and are as important as the wire-frames. A typical sitemap is similar to the following:

ab425297a4199551591fad6156f7baab

Site-map Example


Question 2

Screen Capture of E-commerce website

 

a) Create a table describing ALL the navigation labels.

CaptureK

b) Describe what labels you do not like and why, and suggest improvements.

Most of the labels in this website are self-explanatory but I don’t like certain labels. For instance in the top of the page labels, there is a label “News Room” which does not tell the user what exactly does it lead to, giving the impression it is about News from the retailers whereas it is actually about media articles or news about the retailer. It could be called Kogan in Media or something similar to make it obvious. Moreover, the bottom page labels are a lot and they could be turned into secondary navigation labels instead of listing them all. The main headings Shop, Customer Care, Top Brands etc are fine and then further sub-labels should be shown when the mouse pointer hovers over them.

c) Describe whether there are any inconsistencies in the labeling system between the
pages on the basis of style, presentation, syntax, granularity, comprehensiveness and
audience. 

While going through different labels and pages, I found some inconsistencies on the basis of style and presentation. For instance, there were minor differences between the titles of different pages i.e. some had Kogan.com written first whereas in some pages it was written at the end. For example, Kogan.com New Zealand – Lower prices. Smarter shopping. and Independent Reviews of Kogan products | Kogan.com. Moreover, the headings of different pages had different colors and styles. Punctuation marks like hyphen and vertical bars were used differently in title pages and it could be made more consistent instead.

d) Describe what forms of navigation are used?

The site primarily makes use of Global navigation.

All the pages have the same global navigation panel which is shown below:

Capture

From all of the pages in the website, the user can access Home, News Room, Reviews, Help, the search facility and the options to access the brands or department of the electronic appliances.

Moreover, the Shop by Department label further gives options to choose the category under the Global navigation panel which is shown as:

Capture2
e) Describe what type of search system is used and the strategies for facilitating search?

During the search system, I noticed that there is an implementation of Search suggestions based on the typed letters or words in the Search bar. Moreover, the website uses the Search by Index method which matches the keywords entered in the search with the available items in the website’s database.

Moreover, in order to facilitate search the website makes use of Canned Search which helps the user narrow down his search of the items based on Brand names or Departments of the searched items.

The example of search term “LED” is given below:

Capture3


Question 3

Two other competing websites

a) Provide screen shots of these competing web sites.


b) Describe how similar the labeling systems are?

Ironically and interestingly, two of these websites Kogan.com and Dick Smith have the same architecture. In fact, they are so similar that it can be said that they follow the same theme completely. Both the top and bottom labels are the same, with Kogan adding two labels i.e. Reviews and Newsroom to both top and bottom of the page labels. However, Appliances Online is a lot different than the two of these.  Its navigational labels are more comprehensive and straight forward. It uses a better technique of showing labels when mouse is hovered over them.

c) State whether you think any particular site is clearly the winner (and if so, why)?

After going through all three websites and their navigation labels, I think Appliances Online is the winner because it uses more consistent and clear labels. It made the navigation easier for the user and the labels itself are self-explanatory. Moreover, the titles and headings are consistent across different webpages. And it also uses different icons to make its labels look more relevant to the pages they are pointing to.

 

References:

[1]       https://en.wikipedia.org/wiki/Information_architecture

[2]      http://www.webdesignerdepot.com/2015/02/the-ultimate-guide-to-information-architecture/

[3]      http://www.experienceux.co.uk/faqs/what-is-wireframing/

[4]      http://theuxreview.co.uk/sitemaps-the-beginners-guide/

 

 

Blog 1 – Information Seeking, Classification, and Organisation

Question 1. a) 

Electronic Record and Documents

Management System

Electronic Records and Document Management System is a software program that helps and manages with the creation, storage and control documents electronically[1]. A typical  ERDMS provides the functionality of tracking and managing documents ranging from spread sheets, word documents, images and records of people or corporations among other categories. The primary use for the system is to make sure you have all the relevant documents available whenever needed by you or your organization.

The two major parts of the management system are:

Document Management: The document management module focuses on the access and use of all sorts of documents created by using word processors, scanned copies or images etc.

Record Management: The record management is concerned with the track of timeline of activities that may include business logs, receipts of financial activities and other similar transactions.

Some of the primary benefits of such a system include the following:

  • accessibility of documents and records across the business firm regardless of spatial locations
  • the ability to search through logs of records efficiently
  • easy transfer of records whenever needed
  • better management/indexing of physical documents

Digital Asset Management

Digital Asset Management refers to the collection and management of rich media files which broadly include photos, music, videos, animations, podcasts and other multimedia content[5].

DAM like the ERDMS is the process of creating an infrastructure that provides the functionality of searching and retrieving desired media files whenever needed. It consists up of a metadata database which contains all the necessary information about the stored documents. It makes it easier for the users to get the documents using keywords related to the required media.

At the same time, the Digital Asset Management also deals with the area of safety of data and copyright issues. The use of digital signatures along with the storage of documents makes sure the owners get to reserve their right of ownership of the data. It also ensures to highlight any activity of copyright infringement by continuously checking if someone used the media online without the owner’s permission.

Comparing the two data management areas, we can say that both overlap in their role and functionality in digital media to some extent. Where ERDMS are the systems that help businesses manage the large amounts of data whether online or physical, DAM is concerned with the management and security of intangible data owned by individuals or companies for that matter.

Question 1. b) 

My experience with pearl growing method

We used the pearl growing model (where a user starts the search with one or more documents relevant to the query) in order to research for ERDMS and DAM. While following this model, the first thing that I realised was that we all have been using this model for a long time, only without knowing the name of the technique. Almost all of us use Google as the primary source of information nowadays. I also followed the same sequence where I search for the aforementioned terms in Google and then followed the links that were produced by the Google Search. I found pretty good and relevant documents or websites which provided most of the necessary information about ERDMS and DAM.

While writing the answers to both terminologies, I used those sources to quote the definitions and summarized the rest of the details in my own words since the searched documents had a lot of information. This is a good technique to follow when you are sure that you will get relevant information about the topic you are researching. All in all, this method helped me get an overview of the two terms at first and then I could search more data once I knew the basics.


Question 2. 

List in Alphabetical Order

  • #!%&: 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 siecle
  1. Did you put ‘The Hague’ under T or H? Why?

    Since The Hague is the name of a city in Netherlands and The is part of the name I put it under T.

  2. Did you put ‘El Paso’ under E or P? Why?

    Similar to the first case, El Paso was put under E since El is part of the name (meaning The in English).

  3. Which came first in your list, ‘Newark’ or ‘New York’? Why?

    In my list, New York is going to come before Newark because of the space character which according to ASCII characters, comes before A.

  4. Does ‘St. Louis’ come before or after ‘Saint Nicholas’? Why?

    St. Louis is the name of the city. I put it before Saint Nicholas because St. is the abbreviation of Saint and since both of the first words are same, we will compare the second words in the names. So, Louis comes before Nicholas.

  5. How did you handle numbers, punctuation, and special characters?

    According to the guidelines of NISO (National Information Standards Organization), I put the special characters first, followed by the punctuations and then the numbers.

  6. Assuming the italicised terms are book titles, what might be a more useful way to organise this list?

    A more useful way to organise the list of the books would be to first separate the list of books and then arrange them in alphabetical order according to their names.

  7. 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?

    Chronology can be used to organise the list in such a way that we can make two different sections for books and cities, and then place them in the order of read first or visited first.


Question 3.

Organization Schemes

1. Topic/Subject

1

The Sunday Morning Herald – http://www.smh.com.au

This website comes under the Topic/Subject scheme because it separates different areas of news in the horizontal menu according to the interests of the readers.

2. Task

This website allows users to perform the task of searching for flights, cars or hotels based on the data entered.

3. Audience

Apple’s website is designed following the Audience scheme to let the visitors see the necessary details of all their products, all in one place.

4. Metaphor

4

Virtual Piano – http://www.virtualpiano.net

This website uses the metaphor design of a piano in order to let users play the keys just like a normal piano keyboard.

5. Hybrid

eBay’s website is a good example of the Hybrid scheme since it allows the topic wise organization along with the option to perform task of searching and shoping, and the ability to extend information to the audience.

 

References:

[1]          http://www.edms.net/

[2]          http://www.nas.gov.uk/recordKeeping/ERGuidance/ERMSystems.asp

[3]          https://docs.google.com/viewer?url=http%3A%2F%2Fwww.naa.gov.au%2FImages%2FEDRMS-key-considerations_tcm16-47289.pdf

[4]          http://www.aiim.org/What-is-ERM-Electronic-Records-Management

[5]          http://searchcontentmanagement.techtarget.com/definition/What-is-digital-asset-management

[6]         https://docs.google.com/viewer?url=https%3A%2F%2Fnet.educause.edu%2Fir%2Flibrary%2Fpdf%2FDEC0203.pdf

[7]       http://www.niso.org/publications/tr/tr03.pdf

 

 

Fahad Sharahili

Third Year Student In Bachelor of Information Technology.

Professionally, I am very interested in system services and networking is my best practices — delivering robust, well-tested — as I am a full-time student. For hobbyist computing, once I graduate, I intend to pursue my backlog of data visualization projects because it’s visual, challenging, and rewarding!

I’m most proud of the projects listed in the university. Every project I’ve completed has been incredibly challenging and frustrating at times, but the end-results are very rewarding. Through these projects, I’ve learned practical skills, but I also learned how to overcome fear of failure and to become motivated by the work itself and not the grade at the end. It was an incredible shift in thinking from “It’s not good enough for an ‘PASS’” to “It’s not good enough for me”. Also, I will probably be guilt-ridden for the rest of my life.

I have never used a blogs before however I’m selecting this course to improve myself in blogging and I look forward if anyone in course would like to meet and help each other to do better in blogging.