You, Me, Them

 

This week’s lecture was all about personas and the different types of people to expect while creating or designing a site for someone. It asks who do we appeal to? The majority or the minority when creating the site? And the truth is, you want to appeal to the majority but also include the minority as much as possible. An example would be if there was a certain layout the majority liked but the minority didn’t like how there wasn’t any blue. You just should add blue to appeal to some of the minority.

So, this is when you should figure out what exactly is a persona? Well to put it simply it’s a hypothesised group of people who would use your site. The way you can gather an idea of this is by interviewing people and documenting their responses. Doing this will assure that you can get an accurate idea of who, how and why someone would be using your site and the purpose and intentions for using it allowing you to create a persona which will fundamentally shape how the site looks and feels. Another feature of creating a persona is you can establish an idea which platform (PC, Mac, phones and or tablets) so you can create and design a set layout for the persona.  Attached below is a screenshot from the lecture that gives you an idea of what a persona is.

 

personas

 

persona questions

 

 

You, Me, Them

Interact! Interactions and Interacting!

The lecture this week was presented by Leon Cmielewski. The lecture is based on instructional design, it covers how to do something and how something works. Leon covers what was presented last year in another lecture that is based on instructional design. He covers the basics of instructional design from what is a good design and what type of designs are lacking. E.g. the IKEA instructional designs which are made for anyone to read but are useless.

Other topics that he covers is the cultural differences and the over use of information/too much written word on a design that is not easy to follow. You want a balance of the text and image. With a focus on image over text as texts are forgotten easier. It is also suggested that you use illustrations over photography as photography has too much information and can at times not be enough to explain something. Therefore, it is suggested to use illustrations as it is more effective at explaining something with basic illustrations which show focus on the key areas. Something that photography struggles to do at times.

illustration vs photography

Leon then explains after going over what was taught last year about the different types of interactions. They are:

  • Instruction
  • Clicking buttons and interacting with something to tell the site what to do.

 

  • Conversation
    • Back and forth dialog, which is easy to get an idea of what he is talking about.

 

 

  • Manipulation
    • Drag and drop elements, which again if you have done anything to do with websites is something you will know

 

  • Exploration
    • Open, playful and game like. It allows the user to do things at their own pace in an interactive means that can be more helpful and useful to those who like to explore and find things e.g. virtual tours of historical sites or education video games.

This is of course limited to the challenges of these sites, as you have to work with limited screen area and limited resolution while also working with timing of interactions with layering of details that are effected by the user’s interaction. E.g. hidden menus and such.
which when you consider things is all things that someone wouldn’t have to think too hard to accommodate for.

Interact! Interactions and Interacting!

A Wire Frame and design template for a website for toast.

Part of an excercise we were instructed to make a website wire frame for making toast, which is something we have been working on for what I feel is a little to long but the entire point of the excerise was so that we as a group can learn the process of designing a website and what is needed. Below is a picture of my toast website’s various pages and the process of making toast is clearly labelled in a left to right motion.

eyJ1cmwiOiJodHRwczovL2Rpc2NvcmQuc3RvcmFnZS5nb29nbGVhcGlzLmNvbS9hdHRhY2htZW50cy8yNTc3MTA5Mjg5NjYwNTc5ODQvMjg5MjEzNDIzOTU3NTczNjMyL0NhcHR1cmUuSlBHIn0.jlm9nwoww-3xalat5cng9dc5dpmThe Toasty Way

A Wire Frame and design template for a website for toast.

Design, Design and Pattern again!

The lecture for this week was design and design patterns for screens, with a new movement that aims to make for the small screens and scale up to a larger screen as this will allow for a more interactive and in-depth time for a user while they are on the site. This then can allow for the following designs and design patterns to be transitioned easier into a larger design then the other way around:mobile first

  • Responsive design has made a lot of designs look similar, they follow a clean simple look. An example of this is near all WordPress sites. An example of similar design is the hamburger button (which is the three lines stacked which opens a tab menu for other areas of a site), this button is used on basically all sites not just mobile now days and allows for the viewer to see more with the menu hidden away.
  • Another design that is commonly used is the account registration. This is something anyone who has an email, social media or even a WordPress site knows exactly what this is. Which is something that we all know the purpose and use for.
  • Scroll, or the long scroll is something that has come around due to the innovations of interactive mobile devices such as Apple IPhones as they have forced the user to scroll through the page/s and menu/s of a site or application to access it.
  • Card layouts are the rectangular or square boxes usually accompanied by a text box underneath and is made for an easier and simpler layout that is easily rearranged and changed. This layout was something that came around due to Pinterest and is part of Pinterest’s success as a website as it allows the user to see and read bite sized chunks of information that is targeted at them.
  • Hero images, as images that you see when you are on a splash page of a website or anywhere where an image would be either just as effective or more effective in getting across the sites thoughts and what it wants to say to a viewer. Sites like Nike use a hero image on their splash page to help sell the idea of Nike.
  • Animations are becoming wide-spread and used in nearly all sites to help with the load time between segments of a site to keep the user interacted and interested with the site. Examples of an animation would be the apple’s multi-coloured wheel that spins when loading, the windows white and blue bar with the green colour passing through and the white circle lines that make a complete circle when fully loaded.
  • Another form of animation are navigations and menus that are under the hamburger button
  • Hover animations are something used on a PC, not a smart device as they are made for the user to hover and not click to read the information
  • Galleries and Slideshows that depict photos/videos that can be seen in basically all photography websites and even on social media sites such as Facebook and Twitter.
  • Motion animation is used on sites to get the eye of the viewer as moving objects attract the eye. As it can also add interest and intrigue through visual higharched.
  • Scrolling background animations/videos are something that follows the user as they scroll down the page and the image follows and isn’t static.

Material design is made to be simple and easy accessible for a user to allow them to get where they want and navigate the site with ease and little to no issues at all.

Responsive design is something that allows for a site to be almost the same layout but keeps the look through variations of screen designs from PC’s to smart devices. They are typically clean designs that allow for this type of design to be applied easily.

Flat design. Is something that is encompassing in all these various designs just highlighted and allows for the sites to use these design ideas as it usually uses the minimalistic style to allow for the user to easily navigate along the site and allows for smooth transitions through the designs already discussed.

Design, Design and Pattern again!

What is Process and Use?

For this week’s lecture (week two) there was no other resources or videos that we needed to look at so the breakdown of the lecture will be shorter than of the previous. As the lecture starts out explaining that it will be looking at the key usage of use. Which will be explained later in the post. As the first part of the lecture is about the design process overview. The image below is a demonstration of the process overview which Sarah Waterson gives to us at 2:45.

the-stages

 

Once the idea of process is being talked about Sarah gives us this image (pasted below) which is very convoluted but also oddly makes sense when studied helps makes us understand what exactly is involved with the process. She then states that “everything starts from doing it by hand”. Which basically means to draw, write and even creative ideas from pencil and paper so that we can come up with a flow and the best way the site would run. It is literally trying to put the puzzle pieces together to make the site and vision not only complement each other but to boost and improve each other through the site design and contexts. Which would be achieved through doing research and interacting with sites and places that it going against or it be used in a similar way. Which eventually leads onto the final stages before we even think about doing anything concrete by building and using prototypes. (basically, just linking back to the first image with the process stages)

process-deisgn-overview

Part 2 of the lecture is all about context (4:59)

This part of the lecture is the two main types of use. They are for and of use. What does this mean? Well for use would be summed up by these questions that are the thoughts behind the usage for the person:

  • What’s the setting or environment in which the interface or the device will be used?
    • Is it public or private?
    • Is it conducive?

And the of use can also be summed up by these questions that were spoken of in the lecture.

  • Who will be using the device or interface?
  • Will it be used by one person, or multiple people?
  • How long will the interface be used?
  • Will the person be able to focus on their task, or will they be interrupted while using it?
  • Does the experience need to be extremely simple?
  • What are the persons needs and goals? What’s are they trying to accomplish or complete?

 

From these questions, it should be clear that there are two drastically different types of usage for a product that needs to be looked at, not from just the designers and creator’s perspective but also from the consumers. Within the lecture, Sarah says:

for example, I may login from bank account at home to check if a transaction has posted or I might login inline at the supermarket to check I have enough balance within my account. In both cases I wanted to know my account balance but I need that information for very different reasons, at different times and locations. By using different devices and with different urgencies….”

From this we can pull what the lecture is about more easily then with what was presented to us so far, as it is a clear example of the example of use and the thoughts and questions that one needs to think before they are even done with the research, as there needs to be an ease of access and friendly interface that will allow people to use whatever it is they are trying to do, even if it’s how to make toast.

 

What is Process and Use?