We had a workshop with David focusing on UX and UI. The workshop focused on what the difference between UX and UI, what makes a good UI and principles of each process. I think this workshop was really useful developing our knowledge in two of those areas. UI designers focus on the way users interact with the either mobile app or computer. By 1980’s first graphical user interface was developed by computer scientists at Xerox PARC. Users were able to interact with their computers by features such as icons, buttons, menus, checkboxes. This was a ground breaking rule as there was no need for coding, this meant anyone can learn how to use the computer and personalise the device. UI aims to create a good design which users easily can use and increate functionality. If users can’t work out how to use the device then this would effect the sales of the device. UI designers need to enable users from all ages, backgrounds and technological experience can to effectively use the device.
UX design is the improvement stage after the UI process. Peter Moreville created a diagram, which points out how to achieve an effective UX design. If the UX designers achieves all the elements in the diagram then most likely it will achieve a good UX design. Peter Moreville believes in 7 factors are the most important part of UX design. There are useful, desirable, usable, valuable, finable, credible and accessible. I also think these elements are very important because just because an app is easy to use that doesn’t mean it’s good. UX focuses on things such as menus the correct terminology for menus, the correct call outs of actions, back icons which makes it easer for users to go back rather than keep going back to the main screen. There are many elements for UX designers to consider when designing a good user experience.
Towards the end of the workshop we were asked to create wire frames of a chosen app. This would allow us to understanding how wire framing works and how each app functions. We chose to do Instagram which was a very hard as it is a very complex app with many elements in each frame. This also makes it easier for users to navigate in the app with different elements to go back to sections in the each page. We started to sketch out the navigate to have an idea what the frames have and how each frame needs to link to each other for a smooth working UX design. Instagram is a social networking app which is used by millions of people all around the world. The user audience varies with age, gender, backgrounds, technological experiences and so on. I really like Instagrams layout design because as it’s a photograph and videos based app the design is very minimal and simple. They focused on black and white colour scheme, with white background for more space and for layout to not look overcrowded. The font used san serif fonts which create a clean, informal but sophisticated look. There are many icons used in the app such as home buttons, explore, add a photo, likes, profile. These icons are placed on the bottom of the screen which make it easier to use. There are other icons such as the ‘story’ and message icons placed on the left and right sides of the bold Instagram logo separated from the timeline with a line.
Instagram profile has section has recently changed due to an update. They changed the design with the update which I do think it looks better than the other version. Making changes to an app design can be very risky as users get very familiar with the design and once there’s few changes it could make the user feel uncomfortable or hate the design. The changes in this version consists of the profile image has moved to the left side with user name and biography placed on the left of the image. The size of the profile image is bigger than original which fills more space on the screen. The ‘follow’ and ‘message’ place below the profile message to fit the screen . Small changes in the design can really effect the users at first, however if the design does’y limit the usability then users can easily get used to the new design. I think visually, the new version looks better on the screen, there is still white space but it makes each photo and element stand out.
WIREFRAME
This wire framing is very brief sketch of navigating between home screen, profile and to stories settings on the story section. You can clearly see the app is very complex, there are many frames which go back and forth. For my app design, I want to keep it very simple but have as strong visual design. As Instagram has many features such as messaging, posting photographs, searching, different categories for each section such as art, lifestyle and personalised discovery page depending on things and people you follow. All these elements create a complicated app which needs to be carefully designed to not have a crowded layout also for user to easily know their way around the app. I was thinking about adding a discover section in my app so it’s not just meeting friends. As some apps like ‘HEY Vina’ a social networking app for women, I saw that it wasn’t just matching and talking to people the app had features like planner where you can see the meet ups you arranged for that week. For my app, I want to include a small section where you can just see popular destinations in that area or many cheap bars and restaurants for travelers. I think this could be a good feature as users can interact more and spend time on the app searching to find good places to eat around the location they’re at.
Busra Yildiz 