Research

Having an understanding of user experience and user interface (UX/UI) design is an important skill when building digital platforms and products. Whether it be websites, mobile applications or even wearable technology, knowing what user experience is and how users interact with the interface should be a key priority. Apart from a digital platform’s visual appearance and aesthetic design, the overall experience should also be considered. This is where the role of UX and UI come into play. UX design is more focused on the optimization of the product and ensuring user satisfaction by creating an effective, easy to use and enjoyable platform. Whereas, UI design is responsible for the interactivity and the look and feel of the platform. Both UX and UI work hand in hand to successfully create a fully functional, user-driven and visually pleasing digital platform.

For my research, I have looked at various photography and videography websites to critique. However, most of the websites that I have found involved animation and javascript hence, I prioritised my research on websites that were built using HTML and CSS, or with minimal Javascript.

 

Storm Luu Photographerhttp://www.stormluu.com

Storm Luu

Storm Luu is a film photographer based in Tokyo. I found her website in awwwards.com and it was listed as having a honorable mention. Upon loading her website, I was welcomed by an animated splash page with her name. Afterwards, this automatically goes to her main homepage with all the navigation links vertically placed at the left side of the screen. Her website is overall simple and clean, as a photography portfolio should be. However, I was hoping that it wouldn’t lead me to the albums straight away. In terms of its visual appearance, I really liked the way the album titles were laid out and the photographer’s style. There is a pagination placed at the bottom to navigate the albums, but you can also scroll up or down as this does the same action.

Portraits1

A loading page with the photographer’s logo is shown when switching from one page to another. This is similar to her splash page. Clicking the album will redirect the user to the designated page. I like how the photos are not typically laid out thus, grabbing my attention. Some photos were enlarged whereas, some photos were smaller than the usual gallery size. However, the sizing of the photos and how it appeared was confusing at times. Although this may be part of her style, it can look cluttered and disorganized from a user’s perspective. On the right side of the screen, there is the “Prev” and “Next” link. Initially, I thought this would show me a previous or next photo, but it turns out that this will direct you to the next album. I understand what the designer is trying to achieve but I did not really like how this was the function behind it since there is an option at the top right corner, “All Series” hence, I assumed that this would take me back to the album selection.

KF (1)2

Clicking a photo would enlarge the file and the usual left and right arrows to navigate are evident. However, one thing that I found annoying is the placement of the “X” button in the middle. At first, I didn’t see it due to the color as it blends with certain photos. If it were place at the top corner, then it would be easier to find and use to exit.

Overall, I think Storm Luu’s website is a unique approach to a photography portfolio. The placement of links, navigation buttons and content catered to her style. From a UX and UI perspective, it is simple, clean and straightforward. However, the portfolio itself is not as easy to use and navigate which should be an enjoyable experience, since it is the main purpose of the website. In addition, the more I scroll through the website, the more it is difficult to read the vertical placement of the menu links. Storm Luu’s website lacked elements of UX and UI especially when it comes to usability and functionality.

 

Harald Eisenbergerhttp://www.eisenberger.co.at/

01.PNG

Harald Eisenberger is an Austrian-based photographer who specializes in various fields of photography. I stumbled upon Harald’s website through awwwards.com and it had a honorable mention as well under the best photography blogs category. I liked how Harald had a language option so users can easily toggle from German to English. By doing so, non-German speakers can navigate and read the information in his website but more importantly, he is expanding his potential clientele. I am also a fan of the hamburger menu because it is a more convenient and simple alternative to the menu bar that is commonly found in most websites. Harald’s website is also a ‘scroll-type’ wherein pages such as the about and contact page is not another link that users will be redirected to. Instead, there are designated sections of the key content. Although Harald still has a link to his specific About page, I think that adding a short blurb of who he is and what the purpose of the website is, would be helpful for the users.

02030405

Halden’s works/albums are properly labelled and easy to identify especially for first-time users like myself. From a UX and UI perspective, this is an important factor to consider since this is the main content of the website. Although the gallery could have been more aesthetically pleasing, the ease of access and effective usability still remains a higher priority because it enriches the overall experience of the user. Going through Halden’s main page was not too overwhelming nor did it lack the visual information that I wanted to see in a photography website. A short description of his profile, a gallery that previews some of his works and immediate contact information. A good website that focuses on UX and UI would consider this point. Moreover, when I clicked on one of the albums, I found the placement of photos to be well-organized. It was also easy to click onto a photo to zoom in, exit and navigate from the next or previous photo. Altogether, Halden’s photography website had components of UX and UI design which evidently shows throughout the website. It may have lacked the visual aesthetic to an extent, but its design and usability proved that an understanding of the user’s needs and fulfilling the website’s purpose is more important.

 

Izabela Urbaniakhttp://izabelaurbaniak.pl/

izabela.png

Izabela Urbaniak is a photographer from Poland and I also found her website through the awwwards.com website. Izabela’s homepage showcased a full-sized animated photo gallery of her work that continuously loops. From a UI perspective, I thought that this was executed well because it gave the users a glimpse of some of her work and the style of how she captures photos. As a client, I can appreciate this because I am able to see if her style of photography will cater to my needs. In addition, Izabela’s homepage also includes a menu bar located at the lower portion of the page. I think that this is a good way to welcome the user because it provides a sense of navigation upon entering the website as it includes all her links throughout the website.

db106

Upon clicking a link from the main homepage, the user will be redirected to the main contents of the website. Compared to the main homepage, the pages have a different layout and feel as it is more clean and the design is kept at minimal. A simple menu bar is placed at the top corner which I found to be effective in terms of its usability. The top corner also included her name and icons of other social media accounts. Regardless of the information that was placed at the top, I did not find it overwhelming nor did it distract me from thoroughly exploring her website. Izabela’s gallery featured various albums of her work based on themes rather than categories. From a client’s perspective, I thought that this was quite interesting because I don’t necessarily know what to expect in each album whereas if it was labelled by category, I would know straight away what kind of photos will be featured. The way Izabela labelled her albums may be confusing for some users who are used to conventional and categorical galleries but I did enjoy browsing her work because it had an “element of surprise” before viewing what’s inside. A good UX design emphasizes on the ease of use of the users and how effective the design has been laid out. Navigating through Izabela’s gallery was simple, straightforward and easy to use which again, is an indication of a well-thought UX and UI website design. Although, I was hoping that her gallery cover would respond whenever I hover over it rather than solely relying on the cursor changing. This would have been helpful to identify which album I am clicking onto. Other than that, Izabela’s website fulfills the purpose of her online platform. The layout of the photos inside the album were well-organized and equally proportionate. As a user, this design and visual interface made it an enjoyable experience to go through her work and view the images that stand out.

db2

A message/enquiry form has been provided in Izabela’s contact page. This is a convenient feature for users because they can easily ask questions or give feedback to Izabela’s work. Since the messages are directly sent to Izabela’s email, it saves time and the hassle of composing an email from scratch. However, I was expecting to see other contact information such as her mobile number and email address to be included in the contact page as other websites have done. Overall, I really liked Izabela’s photography website because of its simplicity and effective usability. Exploring and navigating through her website was not difficult nor was it overwhelming. She may have missed adding some information such as her mobile number or categories for the albums, but Izabela’s website still had elements and features that enhanced UX and UI.

Conducting in-depth research is a good way to understand how UX and UI is applied in digital platforms. Whether it be a website or a mobile application, knowing the difference between an effective, user-friendly platform to a difficult, unusable one is necessary when applying it to my own project. In addition, the websites that I have critiqued gave me inspiration and ideas as to what to include in my intended website. It also gave me an idea of how to layout different pages of my website. Based on the research I have done, I will take into consideration the visual aesthetic and information that will be included as well as what is best for the users in terms of usability and overall experience.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s