Research into Interface Design

Research on interface design:

To ensure I create a modern interface design that is appropriate for my target audience, I looked in to the main aspects of design I need to remember to make sure it is user friendly.

Main focuses:

The structure – Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.

How simplistic – The design should make simple, common tasks easy, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

The Visibility – The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives or confuse them with unneeded information.

Feedback – The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

Reuse – The design should reuse internal and external components and behaviours, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

What are the main functions of an app:

  • Notifications – We’ll need to push the new words to the user via a notification, so we’ll need an onboarding screen that asks the user to allow push notifications.
  • Home Screen – The user should be able to purchase multiple different language lessons, so we’ll need a home screen where they can purchase these lessons and activate existing ones.
  • Tracking Progress – The user should be able to see the progress of each lesson that is currently activated.
  • Viewing a Lesson – the user should be able to see a list of the words they’ve learned so far in a given lesson.
  • Viewing a Word – The user should be able to view words they’ve already learned. This should include the definition, image reference, the part of speech, audio pronunciation and link to conjugation.

What is the main information on the homepage:

  • We want an element of gamification, so we’ll show their stats nice and big at the top of the home screen.
  • Below the stats, we’ll show their current lessons, their progress, and locked lessons. We want to make sure that it’s obvious that these lessons are inaccessible. This will entice the user to unlock them every time they visit the home screen.
  • I want the app to be very visual so I’m going to try and incorporate nice photography into each page.
  • Since this is the home screen, the user should be able to go anywhere from here. To begin with, our app will offer some basic user settings, so we’ll make sure there’s a way to get to settings screen from this home screen.

The five pillars of interaction design:

  • Goal-driven Design:You want to design for the right user. User research, such as surveys and interviews, will help you create personas for those most likely to use your app. This allows you to create specific goals for your users and tailor your app’s workflow to suit their needs.
  • Usability: If your audience can’t easily use the app, then they certainly won’t download it from the App Store. Usability makes a productuseful, which is the first step in being
  • Affordance & Signifiers: The affordance is the function. Signifiers hint at affordance. For example, blue, underlined text indicates that clicking on it will take you elsewhere. Use signifiers correctly so users don’t need to think about what each UI element does.
  • Learnability:You want users to instinctively know how to use an interface. This is where design patterns come in handy, which we’ll talk about later in the article. Familiar patterns help a new user easily acclimate to an app.
  • Feedback & Response Time: Feedback lets users know if a task was completed or not. It can be as simple as a beep, or more complex like a modal window.

 

When designing for a user I need to remember:

  • Personas: Personas are fictional characters fashioned from the expected behaviour of your target users. They allow you to determine what will drive users’ decisions within your app.
  • User Scenarios: Scenarios provide insight into how a persona will act. With user scenarios, you’ll be able to design a UI that best suits them and the goals they want to accomplish.
  • Experience maps: Here you’ll explore all the possible conditions for a single interaction. Experience maps chart each step that personas are most likely to take while using an app. They help you understand all the emotions and circumstances that surrounding those steps.

 

The two categories for interaction designs

  • Gestures:Touch devices are defined by gestures. Touch, swipe, double-tap, pinch and zoom are becoming second nature to users.
  • Animations:Motion keeps users grounded in the UI while adding context. There’s a difference between elements that vanish and those that slide out of sight. The former is deletion; the latter is available for use later. When animations are combined with gestures, they add another depth to the experience.

3-iPhone-app-designs-UI

I really like the colours used in this design, it looks very sleek, and easy to follow.

14

I really like this design, the gradient makes it look fun and attracts the audience to use the product.

18-iPhone-app-designs-UI stock-vector-templates-design-set-of-web-mail-brochures-mobile-technology-and-infographic-concept-saas-254881549

 

I like the geoprint in the background, I think this helps it look more modern and differentiates it from other app designs. I think I would like to use an interface like this as it will appeal to my target audience more.

 

Bibliography

https://careerfoundry.com/en/blog/ui-design/how-to-design-a-mobile-app-using-user-interface-design-principles/

https://thenextweb.com/dd/2015/07/01/7-tips-to-create-awesome-mobile-app-designs/#.tnw_I2CUmUO6

Research into Interface Design

Exploring logo designs

Flower1 Flower2 Flower3 Flower4

 

These set of designs were inspired, by lotus flowers and their connotations with peacefulness which links in with the title of the product. I tried to make it look like the inside of a lotus flower, like a bird’s eye view of it. All the 8 different versions are the same design but with different colour coordination’s from the colour scheme.

I asked my target audience which one they thought was better, they were stuck between 2 and 8, but after some discussion, they decided on 8.

I quite like this design, as I think it is very pretty, but also different to other logos I have seen for mental health. There is still more improvements that could be made to it, but so far I think that this would be suitable.

Exploring logo designs

Starting to create the logo

Possible heads

Today I started to create some potential logo designs. From looking at my research and inspiration, I really like the idea of a head, so in Adobe Illustrator a drew out an outline with the paint brush tool. This is the head look that I ended up with. Number 1 is the basic outline, while 2 was an effect I found and I thought the outlines of it were really cool, however, it shows where the breaks in the drawing are with the little arrows. 3 is just a thicker outline of 1, as I thought this would be easier to see if it was on a colourful background. From evaluating each one, I think that q would be the best to go forward with, and it is plain and simple and represents what it is well enough.

Collection of Headshead and backg1head and backg2

To develop the outline further, I coloured the heads in with the different colours from the colour scheme. From doing all the different colours it will make it easier to then apply any of them to any coloured background, as I already have a sample of them to work with. This the made putting it on a background easier. I went for a gradient look from the colour scheme, as from my research shows that gradient helps to make it look more modern. From this I took the contrasting coloured head and but it on a background. From looking at the sample, I feel that it looks very dated, or looks like it came from the 90s. To start I think it could be from the design shape of the head or the background clashed with the colours of the head. I tried to adapt it to see if I could make it look any better. To improve it I tried to use the title to break it up, and have the background the same colour as the head. I still think this design looks very dated.

head and backg3

 

Even so, out of all the designs I have been through, I think this one is the best, as the gradient looks like its light shining down upon him. The colours go well together. However, the title is hard to read still.

Starting to create the logo

Development of colour scheme

Blog-Ashton-ColorPsychology-meaings-1

 

We deciding the colour scheme for my project, I first did a little research on the different type of emotions that they represent, as this will help me decide what will be the best colours to aid being calm and positive. When looking at this poster I tried to mostly consider the positives as, this is all part of CBT, which is trying to look at everything in a more positive light.

Possible consideration of colours:

Blue – this represents tranquility, security and peace. This would be helpful as, these are three aspects that calm a person, knowing that they are safe and in a calming environment.

Green – Healing is the key word that caught my eye, as this is what the service is I am aiming to get to.

Yellow – Warm, Energetic and Happy. This will help to contrast the other colours as, it should bring happiness, this could bring their mood up.

Pink – Healthy, Happy, and Playful. Again, these colours can be used to juxtapose, from the green and blue to give a lighter heart look.

coloArtboard 2 Artboard 3

 

From this I then looked at different colour swatches that were both calming and happy. I found this quite hard to look for as, sometimes the colours did not go together, or they were way too dark and looked depressing. From the eleven I found, my target audience then went through and told me which swatches they liked the best. This lead to the final four. These swatches are quite similar in a sense, as most of them feature greens and blue. However, I feel that 4 maybe too brightly coloured and could look quite dated. 3 I am not sure on the about the two different types of oranges in there. In 2 the purple maybe too dark, but the use of the lighter orange could contrast that. With 1 the colours are quite similar, which means they will blend together easily, and one colour will not stand out from the rest.

 

final colour

From deciding that the final four still needed work, I mixed the colours up that I liked and thought went together into a new swatch.  I think that these colours complement each other well, as I had two darker shades of green and purple to contrast the lighter shades of green and blue. This means that the lighter green and blue could work well as background colours while the darker colours could be used as texts to stand out. The cream colour is useful, as it helps to separate the dominate colours, and goes well with each one. I showed this final one to my target audience, and they agreed that it was the better choice.

 

Development of colour scheme