In todays class we learnt all about sketching interfaces, and how we can effectively use paper to get some wireframes down, and from there how we can move forward. It is so important to start with pen and paper, as it is a low cost platform, and we can iterate faster, which means more ideas quicker. We are now in the develop stage of our design process, and we are ideating our ideas.
Paper sketching should come first as on paper we can focus on the functionality rather than the detail. It lets us to focus on what is important, and not to stress too much about the details that only matter further down the line. Paper sketching also encourages teamwork and collaboration, as we all have the ability to come up with quick sketches, whereas using software like Figma is a bit more exclusive. It also allows us to test quicker, as we can get feedback before we even start designing on software. This means that we can make potential changes quicker without having to waste time developing or designing it on Figma.
Icons are a common part of UI design, and understanding them and knowing how to design them is quite important. Icons should start with pen and paper, as we need to know what identifies each one and what makes each one unique. We had a 10 second task where we drew a camera, a keychain, and a house. This helped us understand the importance of using basic shapes to form unique icons.
“The average person can only keep 7 (plus or minus 2) items in their working memory.”
Miller’s law talks about how users can only keep around 7 items in their working memory. This doesn’t mean that we use 7 as a magical number that justifies everything, but it should be used as a guide for us to organise content into smaller chunks. Jakob’s law is all about how users prefer our sites to function the same as others, and this relates to this law how users can’t remember a lot of complex steps to complete a task. Using the law of proximity can help compartmentalise the content and make it easier to understand what elements belong to each other. YouTube does this brilliantly by using nav bars, a side menu, and having the videos organised by image, title, and text. They also only show 6 videos on the screen at a time, not overwhelming the user.
Flow diagrams are a tool that is used to help us get the logic of our application right. It works as a blueprint for our design. It helps us to know what screens we need to wireframe, which will help us be more effective when it comes to sketching out these wireframes. Flow diagrams is all about the structure of information and the process, whereas wireframes is all about taking that structure and process, and thinking about how it could be presented. A sitemap diagram shows us the structure of our website, and the different paths the user can go down. Different shapes are used in a user flow. Square is for step, diamond is for decision, and the rounded square is for the start and end.
Sitemap
User Flow
We were given the task of creating a user flow for a smart planting app. We were given a different scenarios that we could choose from and had to pick one to create a user flow for. The one that I chose was “Identifying and diagnosing any signs of infection in the plant”. For this, I had the idea that the user would take out their camera and take a photo of the plant. From here the user could see other plants and what they look like when there is something wrong with them. From there they could reference across and see if their plant has similar features, and if it does, they would say ‘Yes’. If they said yes then some suggestions of a diagnoses would come up, and then some treatment would come up. There was some changes that could have been made to my user flow that my lecturer suggested to make it more granular and detailed. This would be adding the different photos of what a damaged plant looks like and this would be a decision that the user would make.
We then created our own wireframes using the user flow that we created. The purpose of this was to quickly get ideas on paper. Considering the different pages that are used for this one flow was quite eye-opening as there is quite a lot of pages necessary to break up the information and to make it granular and not oversimplified.