2020 has been a crazy year to say the least. Confined to the 4 walls of my room, the weeks seem to go on like a broken record, sometimes I forget what day it is and it all feels the same.
What has made my weekdays exciting in the past couple of months though, is 'devsigning' vSydney.
vSydney to put in simple terms is an online version of Welcome Week at the University of Sydney.
Imagine you are walking down Eastern Avenue towards the Quadrangle, with clubs and societies in your peripheral vision. vSydney emulates that tangible experience of interacting with clubs and societies and mingling with USYD members.
I’d suggest to pause reading on and visit vSydney, have a play with it then come back here.
Welcome back! Hope you had fun at vSydney.
Let’s now dive into devisgning ‘vSydney’.
It all started off as a Codepen Jim Cook found and sent to me to have a play with and see if I can get it working again as it was extremely buggy, we sort of got there here was the work-in-progress version, but it wasn’t interactive, but you could see the foundations of the interaction present.
The user would press on the left and right arrows to cycle through the boxes and the information would update based on the box that is now present.
Instead of “boxes”, we would have booths replicating the actual stands you would see at Welcome Week.
Here is a GIF that shows the final interaction in vSydney:
Taking this interaction model, I wanted to avoid the Norman Door (a door that is confusing or difficult to use).
Norman Door was probably the first thing I ever learnt in my undergraduate degree, and is one of the most important things I have ever learnt throughout the degree.
The Norman Door led to the principles of design that I believe every designer and engineer must adhere to.
- “It is possible to determine which actions are possible and the current state”. - Don Norman.
The possible actions are:
- Going to the previous booth by pressing on the left chevron
- Going to the next booth by pressing on the right chevron
The current state is mutated in such a way that:
- When clicking on either chevrons, their opacity reduces. This informs the human that the chevrons cannot be clicked while the action has been executed. This state mutation is further reinforced by the cursor’s style changing from a pointer to the standard arrow.
- Another state mutation is when the user reaches the end of the clubs or societies or the beginning. If it is at the end, the right chevron is in the ‘disabled’ state, if it is at the beginning, the left chevron is in the ‘disabled’ state.
- “There is full and continuous information about the results of action and the current state. After an action has been executed, it is easy to determine the new state”. - Don Norman.
The results of the defined actions above are:
- A new booth of course! Along with the information about that club / society, detailing:
- The name of the club / society
- A favourite button similar to bookmarking a website, you can bookmark a club / society.
- A truncated description of the club / society
- A membership fee and link.
- Two CTAs (Call to Action):
- An information button to present more information about the club / society.
- A chat button to enter a chatroom for that club / society!
- Updated chevrons depending on which booth was selected, if its at the end as stated previously the right chevron would be disabled.
These also represent the new state!
- “The design, projects all the information needed to create a good conceptual model of the system, leading to an understanding and a feeling of control”. - Don Norman.
Compared to the previous 2 design principles, a conceptual model can be a bit difficult to understand (it definitely was for me!).
I believe this illustration explains it best.
Let’s take a different functionality of vSydney, searching for a club or society.
The conceptual model would be:
- Clicking on the Menu on the top-left which resembles a “hamburger”, hence the common name “Hamburger Menu” opens more options.
- Selecting the search icon would inform the human that the main information can be searched and filtered, based on their preferences.
- The search input itself is auto-focused, which matches the human’s modal of: I click on the search icon, I expect that I can start searching / filtering right away. A way to show this would be clicking this hyperlink, see how Google’s search is auto focused.
- The search results are populated based on my inputs of the search and filters, from here I can scroll through the results and select one of my interest.
- “The proper affordances exist to make the desired action possible”.
To put it simply, affordances can be anything that allows interaction between the computer and the human.
Let’s take a functionality from vSydney, favouriting a club / society.
The affordance can be seen through the action of favouriting a club / society via pressing the heart icon, retrieving feedback via the colour change which represents the mutated state.
- “Any mark or sound, any perceivable indicator that communicates appropriate behavior to a person” - Don Norman.
The way we access the favourite affordance is by the favourite signifier. The heart icon signifies to the human that it can be pressed, thus indicating the affordance we have of favouriting a club / society. This is further reinforced by the changing colour of the heart icon to signify that the affordance has been executed and the state has been updated.
- “The relationship between controls and their actions following the principles of good mapping, enhanced as much as possible through spacial layout and temporal contiguity.” - Don Norman
Mapping is essentially the relationship between the control and the connection to the action.
In vSydney, mapping can be shown through the way we cycle through the booths on Desktop devices versus Mobile and Tablet devices.
On Desktop devices we have a connected mouse or a trackpad on laptops that allows us to click on the chevrons.
On Mobile devices we do not have such thing as a “cursor”. Instead we have mapped that same interaction model, to a swiping action.
- “Providing physical, logical, semantic, and cultural constraints guides actions and eases interpretation.” - Don Norman
A constraint in vSydney is the disabled state of the chevrons. This tells the human that they cannot press on the chevron until the state changes, thus making it a physical constraint.
Another constraint that is a logical constraint is the Guest mode. This tells the human that they are constrained in what actions and functionalities they can use. This is further highlighted with tooltips that informs the user to login with their University of Sydney supplied unikey to access that specific action.
vSydney has been an experience that I will always treasure from a front-end development and design perspective. It enforces Don Norman's design principles quite strongly and aims to replicate that tangible experience that Welcome Week at the University of Sydney has given in the past.
Once again, the link to vSydney is here: https://vsydney.techlab.works/
That's all from me, stay safe!