Wednesday 3rd October – Week 2 Tasks
- Create a prioritized list of elements that you think should be on the home page of a Norwich-based student accommodation site that enables discovery of available properties and booking of viewings.
- Create a rough interface sketch for the desktop that reflects these priorities.
- Consider available conventions and UI design patterns, for example with reference to http://ui-patterns.com/patterns.
- Building on your sketch, use wireframing software to create a UI wireframe that makes use of appropriate UI patterns.
- Write a concise reflective journal entry that summarises the process and highlights any key learnings. You should explain how the hierarchy of your wireframe reflects the priorities established in the first step of this exercise.
- Draw upon texts referenced in the project presentation notes to support the discussion where appropriate, suggested word count 500 – 1000.
Upon the creation of a Norwich based accommodation website, or in fact, any sort of website or interface, it is important to establish the prioritization of the elements required to create a functioning homepage that meets the businesses objectives. More specifically, the call to action is the main objective of most existing and live homepages.
Now focusing on the task, a Norwich based accommodation website needs to have the following elements that are necessary in order to develop a website that meets the needs of students and other viewers.
This is a list of elements in order and in priority to deliver this successfully:
- Mission Statement/Hero statement, this would be the largest text in size to make sure readers receive an idea of what is the website about and it’s purpose. Behind the text, there would be a relevant background that fits the website and promotes its ideas and activities.
- The form or the search interface that contains inputs that the student or the viewer needs to fill in. The form would ask for information that attempts to match exactly what the user is searching for, and this search component would be directly below the main or the mission statement because the search interface is the call to action of the header sector in this website.
- The navigation bar, this is a very element because it connects the homepage to the other pages of the website that has the necessary information for the viewer. The navigation bar would have several links, usually up to 5 which either link you to other pages of the website or scroll you down to the other content of the homepage. In other words, a one-page website which is effective and has support for users to navigate quickly between content.
- The sign-up button has a higher visual hierarchy compared to the other links along the left of it. Due to the button-like design, it has been given, it also has more visual weight because it’s bigger in size.
- The logo of the company will be placed within the navigation bar at the top of the website, perhaps at the left side and the links on the left. The logo will not be visually dominant, because the search functionality and the mission statement are the key dominant elements.
- After all these elements have been placed, finally comes in the content that is relevant to accommodations, such as some information of the current existing homes with an image, including a read more button for the user in case they wish to find out more about the accommodation that they are looking at.
- Lastly comes in the footer, the footer will have the logo of the company with social media links so the user can connect with the business/website and stay within the loop of announcements and updates. The footer will also have all of the links to the other parts of the website.
The Sketch & The Wireframes
Image of the sketch: Click on the image to enlarge it
As you can see, the image below is an idea on how I would make the site look, you can see clearly how I achieved the above prioritizes in the wireframe just below this sketch.
Image of wireframe: Click on the image to enlarge it
This wireframe has been designed through the software Adobe XD. A software by Adobe that is best suited and created for designing websites and mobile apps.
In the wireframe above, I have made sure to establish my list of element hierarchy and priority. The mission statement is the key element of the header section because it tells my viewers what the website is about. It is the most important piece of text/information that viewers need to be able to immediately see before any other element.
Directly after the mission statement comes in the search UI with the CTA submit. Of course, users will not be able to submit until the user has provided the necessary information within the boxes.
I designed my search interface and functionality based on ideas & information from the following: http://ui-patterns.com/patterns/LiveFilter
“The users needs to conduct a search using contextual filters that narrow the search results.”
The image above involves searching & filtering results so users could obtain the information that they are seeking on that website. From the side of UX, I do feel that the filters above perform the job, however from the visual aspect they really are not up to modern standards.
So I decided to take a different approach but the same concept. I used circles as indicators for the range bar because that is more of a modern approach. I then asked for two more pieces of information from my viewers: “Select the university that you are studying in:” – “Number of bedrooms:“. This makes my search function more deliverable in terms of what my viewer is wanting to find and in a modern way.
In the book Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, Third Edition by Steve Krug
Steve mentions that interfaces/websites need to be self-explanatory and self-evident. Which means users shouldn’t have to ask anyone or another person for help on finding a page or a piece of content they are looking for.
“For instance, it means that as far as is humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatory.
I should be able to “get it”—what it is and how to use it—without expending any effort thinking about it.” – Steve Krug
I do agree with his thoughts and opinions because how is a website meant to be fully functional and deliver the best of the best experiences if it is hard to understand and un-usable?
Some modern design relevant examples:
Proceeding to the content section, you may notice that I applied the z-pattern approach. I applied the z-pattern method for the content to allow users to scheme through, most of the time I believe people will look at the image of the home or the house and then read 1 or 2 lines and continue flowing through the content till they reach the footer.
The footer would contain all the necessary links to other pages of the website, as well a link to terms of service and conditions of the company. Most importantly the copyrights.
The Interaction Design Foundation. (2018). 10 Great Sites for UI Design Patterns. [online] Available at: https://www.interaction-design.org/literature/article/10-great-sites-for-ui-design-patterns [Accessed 4 Oct. 2018].
contributors, A. and Toxboe, A. (2018). UI-Patterns.com. [online] Ui-patterns.com. Available at: http://ui-patterns.com/ [Accessed 4 Oct. 2018].
Studio by UXPin. (2018). How to Use the Best UI Design Patterns. [online] Available at: https://www.uxpin.com/studio/blog/use-right-ui-design-patterns/ [Accessed 4 Oct. 2018].
Perry, B. (2018). Documenting UI design patterns | User experience. [online] Jiscdigicomms.jiscinvolve.org. Available at: https://jiscdigicomms.jiscinvolve.org/wp/2015/11/26/documenting-ui-design-patterns/ [Accessed 4 Oct. 2018].
The Interaction Design Foundation. (2018). What are User Interface (UI) Design Patterns?. [online] Available at: https://www.interaction-design.org/literature/topics/ui-design-patterns [Accessed 4 Oct. 2018].