Today we will analyze website of iGEM University of Toronto (UT) on the functionality and design.
iGEM (international Genetically Engineered Machine) is competition on synthetic biology, which annually gathers over 300 teams from across the world to present their research projects at MIT (Boston, US).
Since my team are preparing a website and promotional video for Nazarbayev University iGEM club as a part Writing for Digital Media course, today we will analyze website of iGEM University of Toronto (UT) on the functionality and design. Here is the link to the website.
The purpose of iGEM UT website are:
to introduce iGEM UT
to introduce the team
showcase their past projects and achievements
to recruit sponsors and new members
The medium of the website is, of course, digital and one could find out about the website during UT club events or (biology) student workshops or on the official iGEM page. The website is designed to the audience with some background in synthetic biology. The primary audience are the students of UT, who might be willing to join the club and sponsors within synthetic biology industry. The secondary audience can be other iGEM teams who seek for collaborations ("Writer/designer").
Among synthetic biologist the fact that this team presents its project on iGEM competition enhances the ethos of the website. Additional ethos is added because this team represents University of Toronto (24th in the world at academic ranking by ShanghaiRanking ARWU 2018) and has been sponsored by 14 schools and organizations well-known in synthetic biology.
The gif with green floating circles, which zoom and fly away upon clicking, adds up to interactivity of the website and evokes excitement, which is pathos. The gif also makes an effective entry point, which is "a point of physical or attentional entry into a design", and successful entry point is key in engaging audience to stay on the website ("UPD").
The logo of iGEM UT has an interesting signs in it. I employ the concepts from semiotics, "the study of signs and their use or interpretation", to demystify the meaning of orange object ("Visual Culture"). Interestingly, this orange sign can be considered as symbol in two different ways.
According to "Visual Culture", symbols resemble the casual relationship with the signified that inherently connects symbols with a particular signified.
First, the symbol looks like a tower and signifies, particularly, Toronto’s CN tower. This symbol shows the origin and belongingness of the team to Toronto.
Second, the stem of the tower resembles the minimalistic DNA double helix, which could be understood as a unspoken symbol of biology.
So, the logo directly conveys the owner’s relatedness to Toronto and biology.
The information is well chunked into small paragraphs assigned by color boxes “What is iGEM Toronto?”, “What do we do?”, “Our Past Projects”, “Our sponsors” and on the teams page and “Wet lab”, “Dry lab” and “Policy and Practices”. "UPD" says that chunking principle helps the separating the information into chunks eases the perception for the audience, while colors enhance the grouping of similar elements.
The Past Projects part of the website is, in my opinion, very effectively represented. The author heavily utilizes consistency principle which is “when similar parts are expressed in similar way” ("UPD"). Other principles such as common fate and good continuation are utilized to enhance the consistency. So that according to "UPD", “usability of a system is improved”. Particularly, the line in the middle and boxes with information coming out of it, improves the grouping of elements.
The consistency also expressed in the font styles and arrangement of the information within the boxes. The links to particular project websites is very useful in promoting the interactivity of the website with its audience.
However, in the “Our Sponsors” part the sponsors’ logos haven’t proper aligned are concentrated on the left side, which empties chunk of space on the right. This is ineffective design choice in accordance to the aesthetic usability effect principle, which conveys that people perceive more~aesthetic designs as easier to use("UPD"). These aesthetic faulty could push away prospective sponsors.
Another less obvious but still disturbing alignment faulty was noticed in “Team” and “Contact” page. The pages are expected to have similar size of the box assigned to theme. Additionally, the picture of a man’s back in laboratory in heading for “Teams” does not correspond to usual perception of “Team”. It would be better to have a photo of real iGEM UT team.
In terms of the functionality of the website, all the links and menu folders work properly and redirect to the proper content. “The visual clarity of text, based on size, typeface, contrast, text block and spacing of characters used”, which comprises legibility principle, are all well-considered by the author ("UPD").
Overall, the website is quite simple and performs its purpose in introducing the iGEM UT to its audience. However, I would correct the allignments and add more pictures of the team, since it will make the website more personal and more people would join the team.
References:
Article: "ShanghaiRanking Academic Ranking of World Universities 2018 results announced" by Seeta Bhardwa, TimesHigherEducation.com
Book: "Writer/Designer: A Guide to Making Multimodal Projects" by Kristin L. Arola and Jennifer Sheppard
Book: "Visual Culture" by Richard Howells and Joaquim Negreiros , Chapters Iconology & Form (p.133 - 136) .
Book: "Universal Principals of Design" by William Lidwell, Kritina Holden and Jill Butler (p. 18- 202).
Comments