Users and their Scenarios.

This week’s lecture is on the topic User Scenarios. Which is a breakdown of all the steps a user would use/do when they are using your site. The example given is about a woman named Angela who wanted to find her favourite coffee shop in an airport she is not familiar with.

We are then shown the steps she would take, uses a device that lists all the coffee shops in that airport. She then selects which coffee shop she wishes to visit and then is shown a map with a directory to the said coffee shop. The lecture is an extension of last week’s lecture which is about user persona’s. so, there isn’t much to write about this week’s lecture as it is really all self-explanatory when designing a website as its focus is how will a user use the site and how simple/easy will it be for them to use it?

Advertisements
Users and their Scenarios.

UI Visual Design

ux vs uiThe final lecture of this course is UI Visual Design Patterns, it focuses on navigation patterns.

So, what does this mean? It is how the site looks, feels and what exactly it is that the user is doing or using on the site. Things that are included are the various types of navigation patters. Which are Tabs, Dropdown Menus, Drawer Menus, Search Bar with Dropdown, Big Footer, Home, breadcrumbs. Below is a screenshot from the lecture that breaks down some each type of navigation menu.

nav patterns.JPG

so when does someone know when to use what menu navigation for what they are doing? It is rather simple once you learn what each ones’ purpose is. Here is a break down for each different type of menu navigation that has been listed.

  • Tab: for splitting information into sections when there is a lot of information (between 2 to 9 different sections) and the names for each section is short named.
  • Dropdown menus: is used for when a user needs to navigate through sections of a website, but there is a limitation in space (so ideally used with mobile devices). It is used when there are 2 to 9 different sections and all the sections are placed within hierarchy order.
  • Drawer menus: used for space saving and uses icons as menu navigations which open to show what the name of the navigation icon is (think hamburger menu).
  • Search Bar with Dropdown: adds a shortcut that allows the user to search for what it is exactly they want to find. It is based on a hierarchy order and is a shortcut to jump between sections.
  • Big Footer: the footer at the bottom of a page that shortcuts to different sections of the site.
  • Home: the sites logo or home button goes to the homepage or a safe space.
  • Breadcrumbs: used when a user needs to know their history, location and relation to a site displaying the track the user has gone to get to where they are. An example of this is any news site when the user goes through the site.

There are other types of navigation patterns. this has been covered within previous lectures and posts which is how the user goes through a site and showcases features, adds items and encourages interactivity with the user. The screenshot below. from the lecture, shows an example of content navigation pattern called a Carousel.

carousel.JPG

There are also tags (typically blue texts) that float on a page and are various sizes which use keywords that jump to different sections of a page.

This wraps up the lectures for this course as there is no more lectures and sadly this means that the weekly lecture posts have to stop.

UI Visual Design

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!

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?

The First Lecture.

(This blog post is about the first lecture and a basic breakdown of what is discussed and talked about within the lecture. There are some pictures taken from the the lecture and video to help explain or make clear what is discussed for future reference.)

The first lecture of this course was an introduction to interaction design and the application and understanding of what this type of design is. As it is something that is about directing towards an audience through various means with the use of making the audience can understand what we are trying to tell them using design. Towards the end of the video it is a bullet point (9:27) that is a clear summary of what is discussed within the lecture. These points are:

  • Interactivity
  • Information architecture
  • Time and motion
  • Narrative
  • Interface

Which is summarised clearly within the two videos that we are meant to watch during the lecture. The first one is “Bill Verplank- Interaction design clip” which we are introduced to at 1:06 of the lecture. Within the video, Bill talks about the various means of interaction design and breaks it down to simply:

  • how do you do (how do you affect the world)
  • how do you feel? (how do you get feedback from the world?)
  • how do you know? (what do you know what you are going to do?)
zsanucr
Enter a caption

the picture linked here shows the diagram that Bill draws throughout the video explaining what interaction design is in a very simplistic form that really shows that every part of design is a fluid motion that interacts in a circular motion. Meaning it is reactive and always changing to meet the demands and wants of the client or brief.

We are then introduced to the second video “Gillian Crampton Smith- What is interaction Design?” at 7:09. This video is about the different forms of interactions and the attention that we give to it based on the difficulty and complexity the items we are interacting with. Examples are video games compared to heating systems and building fire alarms.  With the focus on making these things something more easily understandable for people to use. So, people don’t have to look at whatever they are doing and must give a whole lot of concentration to that item when they have become use to it (pretty much it becomes an automatic function instead through the creative use of design). The buzz word “ease of access” is a clear summary of what she is talking about as its about changing everything we use to be more accessible through design.

Which ties into the first video the lecturer (Sarah Waterson) at the end of the lecture as she gives tells us it relates to the first bullet point of this post and then finishes the lecture. Which isn’t bad but the second video was not the best to watch as you had to go from 100% to 300% zoom on the webpage to see clearly what she is talking about as the format for the site it is hosted on is a little outdated as well as some of the means of interactivity and examples given are also outdated. But that isn’t the content that is important as it is what she is talking about and her expertise in the field is the part that is important and is more something that I felt was personally lacking for an interactivity lecture/course.

Image