Interactive Digital Media Links

Flowchart

https://www.gliffy.com/uses/flowchart-software/

https://www.edrawsoft.com/flowchart-symbols.php

User Interface

https://gomockingbird.com/home

http://theuxreview.co.uk/wireframes-beginners-guide/

User Persona

http://optinmonster.com/how-to-create-a-concrete-buyer-persona-with-templates-examples/

https://www.interaction-design.org/literature/article/user-personas-for-mobile-design-and-development-a-winning-technique-for-great-ux

Prototype Testing

https://www.fluidui.com/

http://principleformac.com/

Information/Instructional Design

Instructional design is a product that explains to the user on how something works or how to do something. These instructions may be clicking a button, a list of steps, drag and drop elements or exploring something.

Kalvan

Kalvan

“Learn To Juggle”. Kalvan.net. N.p., 2017. Web. 8 May 2017.

‘Kalvan’ is a website that demonstrates on how to juggle step by step. It uses drawings to illustrate on how to juggle effectively.

Instructables

Instructables

Instructables.com. N.p., 2017. Web. 8 May 2017.

‘Instuctables’ is a website that teach people on how to drive a manual car. It uses large sizes of images for each step to interact with the user.

Syossetsoccer

Syosset

“What Are The Rules? The 17 Laws Of Soccer Explained – Syosset Soccer Club”. Syossetsoccer.org. N.p., 2017. Web. 8 May 2017.

‘Syossetsoccer’ is a website that teach people the rules of playing soccer using 17 laws. For each step, it gives a title with a large, bold font size to clearly demonstrate the importance of each law.

Interactive Design

Interactive design is the communication between a user and a product. A product can be a phone, laptop, website, or an app. The goal of interactive design is to allow the user to achieve their objective the best way.

Interactive design must contain words, visual representations, and physical objects. Words like button label must be easy and simple to understand. Too many words may frustrate the user. Visual representations such as images, typography and icons must engage the user. Physical objects are phone, laptop, website, or an app and how the user interact with them.

Origin

Origin

“Origin”. Origin.com. N.p., 2017. Web. 8 May 2017.

‘Origin’ is a gaming website and an app that allows user to navigate, explore and buy their games online. It uses a navigation bar on the left and clear images and titles of what genre of online games they have.

Steam

Steam

“Welcome To Steam”. Store.steampowered.com. N.p., 2017. Web. 8 May 2017.

‘Steam’ is a gaming website and an app that allows user to navigate, explore and buy their games online. It uses a green box with white words, ‘install steam’ to engage the user to try their product.

Western Sydney University

WSU

“Home | Western Sydney University”. Westernsydney.edu.au. N.p., 2017. Web. 8 May 2017.

‘Western Sydney University’ is a website that allows user to navigate and explore their content. It uses images of student and bold and huge lettering to clearly illustrate their context.

 

Week 7: UI Visual Design Patterns

Lecture Pod

Web and app user interface design is sometimes mistakenly thought of how the website or app looks, the graphic design. Interface design is not just about the colours and shapes but rather about presenting the user with the right tools to accomplish their goals. User interfaces are much more then buttons, menus, and forms for users to fill out. It is a connection between the user and the experience, the first and an impression that either makes the website feel familiar and helpful, invisible or forgettable and annoying.

User Experience

User experience is the abstract feeling when people get from using website. When designing a website, you want your user experience to be as positive as possible and you want your users to enjoy being on your website or using your app.

Common Navigation Patterns

Tabs

  • Navigation Tabs
  • Module Tabs

Menus

  • Horizontal Dropdown Menu
  • Vertical Dropdown Menu
  • Accordion Menu

Jumping in Hierarchy

  • Shortcut Dropdown
  • Fat Footer
  • Home Link
  • Breadcrumbs

Content

  • Carousel
  • Event calendar
  • Article list

EXDjW

Class Time

No face to face class this week. Assessment 2 due this week.

 

Reference

contributors, Anders, and Anders Toxboe. “Cards Design Pattern”. Ui-patterns.com. N.p., 2017. Web. 8 May 2017.

Patterns?, Industry. “Industry Standard For Documenting Ixd / UI Design Patterns?”. Ux.stackexchange.com. N.p., 2017. Web. 8 May 2017.

 

 

Week 6: Scenarios

Lecture Pod

User scenarios are the stories that your personas act out. Basically, user scenarios are thought or exercises though they are usually represented visually. User scenarios let you understand what your future users will look for when trying to complete task on your site. User scenarios allows you to test your site’s structure before it is fully developed and isolate problem before they become problems.

“A scenario is a narrative describing foreseeable interactions of types of users (characters) and the system. Scenarios include information about goals, expectations, motivations, actions and reactions.”

“Scenarios are neither predictions nor forecasts, but rather attempts to reflect on or portray the way in which a system is used in the context of daily activity.”

Scenario

Class Time

On Monday, we continued our project. We worked on our user interface for our instructional design. On Wednesday, we brought our instructional design to class for feedback.

 

Reference

“Bukoya-Star”. Bukoya-Star. N.p., 2017. Web. 8 May 2017.

“Mobile App Planning”. Pinterest. N.p., 2017. Web. 8 May 2017.

Week 5: Personas

Lecture Pod

User Personas

In most cases, personas are synthesised from data collected from interviews with users that are captured in one to two pages description that include behaviour patterns, goals, skills, attitudes and the environment or context. With a few fictional details to make the persona a realistic character. For each product, more than one persona is usually created but one persona should always be the primary focus of the design. When defining personas, we need to ask ourselves, what are the task your user is trying to perform?

User Personas

  • age
  • sex
  • occupation
  • hobbies
  • likes/dislikes
  • other details germane to the product such as behaviour patterns, goals, skills, attitudes, their environment (or Context)

Large vs Small Audience

  • Who is your core audience?
  • Who is your fringe audience?

If you focus on your core audience when defining your personas, you can still cover a large portion of your user base. The hope is that your design will satisfy your fringe audience but to keep the focus on satisfying your core audience.

Artefact Personas

Another approach is to also apply personas to the Artefact (the project or product, not the user). This can be most useful for client meetings where often the discussion collapses into subjective assertions. To develop an artefact persona, you ask product personality questions such as:

  • If the interface was a person, what would she or he be like?
  • How would you expect users to react when they first view the product?
  • How would you describe this product to a friend?
  • How is the product different from competitive products?
  • Which celebrity (or car, movie, etc.) is the product most like? Least why? Why?

ExPersona_Jill

Class Time

On Monday, we made a collage for Dave Smith’s user persona. Then, we worked on creating our own user persona using xtensio. On Wednesday, Sarah was away so we did not have a class but we started writing user scenario for our project.

 

Reference

“Make It Persona(Ble): How Creating User Personas Helps You Sell More”. Ecommerce Insights Blog. N.p., 2017. Web. 8 May 2017.

“Persona | User Experience Design, Ux And Usability Blog – Keepitusable”. Keepitusable.com. N.p., 2017. Web. 8 May 2017.

Week 4: Instructional Design

Lecture Pod

Instructional Design is how to “do something”, or to explain “how something works”. Working memory refers to how we manipulate information, stalling our short-term memory and one of IKEA executive functions. Working memory is limited for example if you ever gone to the shops thinking you will remember what you need and found you forgot something when you got home, you have experienced the limits of working memory.

Photography might not be the best way to go for instructions because often the material contains too much information to be useful. There is too much detail in the photographs. Kinds of interaction such as instruction (by clicking buttons), conversation (back and forth dialog), manipulation (drag and drop elements), and exploration (open, playful, game like). Challenges can be limited screen area and resolution. Opportunities are time and layering details and information and revealing these responses.

instruction

Class Time

On Monday, we spend one hour to finish our user interface workflow for our toast. Then we had a class vote to see who’s toast user interface workflow was the best. After that, our class created Invision, a website, and posted our toast user interface workflow on it.

 

Reference

“Instructional Design – Education And Training UK”. Education and Training UK. N.p., 2017. Web. 8 May 2017.

Li, Dian, Tom Cassidy, and David Bromilow. “The Design Of Product Instructions”. N.p., 2017. Print.