Abstract:

The importance of user-interface and user-experience in web design cannot be overstated. Users are drawn not only to the aesthetics of a website but also the usability. The augmentation of the user-experience is achieved by critical design considerations which accumulate to bring about a unified sentiment. This essay will critically analyse and evaluate design considerations made for my first website submission.

UI: Navigation Bar

The first implementation for user-interface was the navigation sidebar. A sidebar was implemented to remain static on the left side of the webpage in order to have the hyperlink navigation available to the user at all times. The user can scroll to any part of the page by simply clicking the desired heading on the navigation bar. This static implementation works well with larger screen widths, however, it had to be removed completely on smaller screen widths. This was done by implementing screen width responsiveness. An options bar is displayed at the top right corner of smaller screen sizes and the navigation sidebar disappears. The user can click the options bar and the original sidebar navigation scrolls to the right to be viewed on the entire screen width. Furthermore, an exit “X” was implemented on the top right corner of the navigation bar so that the user can close the navigation bar. According to D Balanco [1] , without proper navigation, websites can appear to be unstructured and unorganised. Good navigation ensures that your website is accessible and usable. The static navigation sidebar worked well for the first submission. However, the responsiveness for smaller screen sizes did not work in extreme scenarios. This is a flaw that I will rectify for the second submission. Furthermore, the sidebar navigation worked well to scroll to the desired heading, however, a visual improvement can be made to provide clarity on which page the user is currently on. This can be achieved by highlighting the current page heading on the sidebar navigation.

UI: Buttons and Hovering

Buttons are used for actions that affect the website’s front-end or back-end; links are used for navigation and actions that don’t affect the website at all – P Wong . This statement by Wong provided me with great insight to when and where I should use buttons or hyperlinks. My first submission consisted of mainly download PDF buttons. I also implemented a 'Hire Me' button on the home page. When a user hovers over the button, it increases in size to indicate that the user can click it. Once the user clicks this button, the web page scrolls to the bottom where the 'Contact Me' page is located. Feedback from this button suggests that it could be perceived as both very innovative or equally cliché. It was decided to keep this button for the second submission in order to have further testing and feedback on whether it should be removed or not. Another button implemented was the ‘Download CV’ button. This button is black with a blue border ( #00ccff to match the rest of the colour scheme). When a user hovers over this button the blue border becomes brighter, and the button size is increased. This was implemented to give the user a clear indication that the button can be clicked. Once the button is clicked, the browser gives the user an option to download my CV or view it in another tab. Feedback from the first submission suggests that the ‘view in another tab’ option did not work. This was a peculiar outcome since it worked on my browser (Firefox) during testing. This will have to be researched and improved for the second submission. The other buttons implemented was the ‘Download PDF’ button for each blog. The aesthetics of these buttons are exactly the same as the ‘Download CV’ button. This was done to create a unified and consistent user experience. Furthermore, the button was implemented to give the user an option to save and read the blog posts in PDF format. This was done to make the content more accessible and usable. For the next submission I want to implement the functionality of the ‘Submit’ button in the contact me text field. This will allow users to fill in their details and send me a message via the website.

UI: Informational Components

About Me section: Your website's About page wields more marketing muscle than any other piece of content – Dholakiya [4] . This section was implemented to give the user background information about myself. This is information is pertinent for potential employers that look at my website. The information provided includes my field of study, the institution I am attending, and further information to provide insight on my work ethic and my passion for the digital field. The information is displayed in a box. This box has a black background to make the white font stand out in order for the content to be clear and readable. Furthermore, the ‘Download CV’ button is within this box located at the bottom. This was implemented in this way because once the user has read the about me content, they have the option to download my CV for further information. Once again, the responsiveness of this section needs to be improved for smaller screen sizes. This will be implemented for the second submission.

Blog section: The academic blogs are a requirement set by the coordinators of WSOA3028A. Each blog has an abstract box for the user to read. The user can then click on the desired blog abstract and open up the entire blog. In order to clarify that the user can click on the abstract I added a sliding CSS colour theme and changed the mouse to pointer every time a user hovers over an abstract. The reason for the CSS colour slide effect is also to make the text easier to read because it separates the background image from the abstract box. Peta Goldberg spoke about the concept of ‘readability’ in her UX presentation at WITS university[5]. Readability refers to the way in which blocks of texts or large complex chunks of information are arranged on a page - Peta Goldberg . In my Blog abstract, the use of the sliding background made the abstract text more readable. I will therefore keep this aspect for my next submission and add it to the project abstracts as well.

UX: Colour Scheme and Visual Design (fonts)

The colour scheme was chosen for two reasons. The first reason was to match the background images of my website. These images are of computer screens and include cool colours such as blue and purple. Secondly, I did research into how humans perceive and feel about different colours. It was found that blue is a colour of stability and usually brings about a soothing feeling to the viewer. As a result I chose blue as my main colour and matched the type of blue to the background images. This was done to give potential employers a feeling of trust and stability when they view my website. Furthermore, the font ‘Roboto’ was chosen because I thought it looked professional for a portfolio website. These decisions combine to form a user-experience that provokes stability and unity throughout the website.

UX: Usability

Web design, usability refers to how easy a website is for visitors to interact with. For example, some sites are visually stunning but difficult to navigate, which makes it hard for users to find what they need. Such websites are on the low end of the usability scale – A2 Support Team [6]. I believe that my website does consider usability for the user. The side-bar navigation allows the user to click on a desired section and the page will scroll down or up to the required heading. However, it is evident from the feedback for submission 1 that my blog section can have improvements on usability. For example, the user has to traverse back and forth to the home page in order to view the next blog. This usability issue can be fixed by adding a ‘next blog’ or ‘previous blog’ button within the blog page itself. This will be implemented for my next submission to improve the usability of the website. This will also improve the user-experience because the website will have a smooth flow between any desired pages that the user wants to view.

REFERENCES: