IxD

UX discipline

INTERACTION DESIGN (IxD)
Page dedicated to my IxD students, those taking the STIV5014–Interaction Design course.

IxD-related journals
The UUM’s IxD course content
Visual design
Free mind map tools
IxD useful papers and docs
Example of IxD projects
Students’ projects
World of design – resources

EXTERNAL LINKS (RESOURCES):

IxD-related journals

List of IxD-related journal and proceedings, indexed by Schimago journal ranking (Scopus database)

http://www.scimagojr.com/journalrank.php?category=1709&year=2015

Go to top


COURSE CONTENT

1.0 WHAT IS INTERACTION DESIGN?

2.0 UNDERSTANDING USERS & CONCEPTUALIZING INTERACTION

  • Applying knowledge from the physical world to the digital world
  • User types and skills
  • How interfaces affect users
3.0 ENTHNOGRAPHY AND MENTAL MODEL
  • Users’ mental model
  • Effective, efficient, and affective IxD
  • User research – ethnography
  • Instrument and tools
    • Interviews
    • Persona design
    • Scenarios
    • Behavioural segmentation

 4.0        CHARACTERISTICS OF INTERACTIVE SYSTEMS & TASK MODELLING

  • Push vs Pull
  • Single vs Multi-user
  • Repeat vs Single Use
  • Expert vs Novice
  • Mobile vs Fixed
  • Continuous vs Intermittent
  • Time Sensitive
  • Structured vs Improvisational

5.0 PRINCIPLES OF INTERACTION DESIGN

  • Fitts’ Law
  • Selection
  • Direct manipulation
  • Mouse interactions
  • Windows behaviours
  • Controls
  • Menus
  • Toolbars and ToolTips

6.0 DESIGNING SYSTEMS’ BEHAVIOUR

  • Making the system considerate and smart
  • Designing Errors , Alerts and Confirmation

 7.0 EVALUATING A USER INTERFACE DESIGN

    • Formative and summative evaluations
    • Expert reviews
    • Usability testing and laboratories
    • Survey instruments
    • Evaluation during active use

 8.0    EMERGING TECHNOLOGIES AND THEIR SPECIFIC INTERACTION DESIGN ISSUES

  • Mobile technologies
  • E-commerce systems
  • Multimedia, entertainment and games
  • Virtual and mixed-reality environments
  • Embedded systems
  • IT Security and Security Systems

Go to top



VISUAL DESIGN

  • Have alook on this video clip on visual design (to be discussed in class)–> https://www.youtube.com/watch?v=hxZdHMU0tdI
  • From wireframe to mobile visual design –> https://www.youtube.com/watch?v=3LKajP0jv4A
  • visual flow activities

    Assuming you are planning to buy a “riding grass mower” from these sites. The mower has to be reasonable in terms of its horse power, moderate in price and slick in design. Consider that you are going to use it to mow your lawn which is large, hilly and have long, dirty and variable type of grass. Remember, you have to consider shipping and delivery as well, for such a mecha-type of product (what if the blade is missing, what if there are other components that needs to come together..?). Try using all these e-commerce sites, search for your desired product:

    http://www.homedepot.com/

    http://www.lowes.com/

    http://www.amazon.com/

    http://dealnews.com/

    http://www.11street.my/

    Then brainstorm with me/everybody in class on

    1. how purposeful the visual flows are

    2. which are the more USABLE as well as aesthetically pleasing in terms of their overall visual design

    3. what about the visual elements in the sites? are they helpful for your tasks?

    4. would you go for a more specialize e-commerce sites? what would be your reasons? only your requirements matter? usability? appealing? …?

Go to top



8 Free mind map tools and how to best use them

http://www.makeuseof.com/tag/8-free-mind-map-tools-best-use/?utm_campaign=twitter&utm_medium=twitter&utm_source=twitter
Go to top

Useful references for IxD: articles and documents

theories

Go to top



Examples of IxD projects

Do anticipate that the IxD projects for this class will be of these six types:

  1. Storytelling strategy on how a teenager should respect their parents/love their country
    1. Sample project: http://www.interaction-venice.com/projects/iuav-thesis/projects-2013/footprintsinteractive-storytelling-for-parents-and-children/
  2. An interactive book (NOT just a flipping book), explaining what interaction design is to your mom/dad/granny. Various design example from
    1. interactive books (flash-based design) or MS Blender with C# or any other authoring tools that can produce an executable file.
  3. A ‘tree avatar’ to be built to assist staff and visitors who came to SOC- showing the various directions and information of interesting places at SOC building. The design of this ‘Physical tree’ should be able to interact and communicate the message across without ambiguity.
    1. This tree should be created in the class first, when done-can be put at the SOC foyer/lobby. Example below.
  4. Create an interactive questionnaire to compile ‘teacher-mascot’ for school children (aged 5-14) with learning disabilities.
    1. Have a minimalist interactive questionnaire made for children to select their most favourable ‘teacher-mascot’. (they can input their age and navigate the mascot selection and choose the one they mostly preferred)
    2. The final output of the questionnaire is an interactive report visualising the statistics of the children’s preferences according to frequency of preferences vs age.
  5. Collect data nuggets of 100 English essays from standard 5 (11 years old) to form 3 (15 years old) and create a simple interface with IxD features to gauge whether they fall into the right category based on Flesch–Kincaid readability tests
    1. Ref for Flesch test : https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests
    2. Such tools are already available, but the IxD needs to be improved:
      1. Example 1: http://read-able.com/
      2. Example 2: http://www.online-utility.org/english/readability_test_and_improve.jsp
  6. A project on tourism called ALL ABOUT KEDAH (from the perspective of a laymen –like enjoying cendol at pasar malam)
    1. websites
      1. can use ready made web services like wix.com, weebly.com or create your woun using HTML and XML
      2. group work – all students involved in this one projects but different chapters of Kedah. Possible chapters in the website:
        1. geographical, map, interesting places (where, how to get there, people’s experiences, on line booking
        2. lifestyle and people
        3. foods and recipes (e.g. Karas – how they prepare, recipes, selling points, where you can get..order?)
        4. …your suggestions.

MUST use the best IxD controls (imperative, selection, entry, display) for appropriate functions, involving these types of media:

  • Texts
  • Graphics
  • Illustrations
  • Audio
  • Video
  • Animation

Involve human (baby, young, teenagers, old..) as much as possible in your design.

  • Have a look at Kickstarter projects for the various projects and methods of delivering their projects here: https://www.kickstarter.com/discover?ref=nav
  • Notes on who you are, the description of the works done for this project, time spent, costs…include tables, charts, and your own work video –in one chapter of the website.

Go to top

Students’ projects

For A52 session, I only have 4 students taking this elective course. They are Yong, Dayah, Nissa and Abdul Rahman. For the project, they should apply the IxD behaviour and design values in their selected product.
ixd-us

Us. Eh, where is Nissa?

ixd-class

Briefing on the various needs and requirements

ixd-me

Me, seriously trying to show examples on wireframing and key screen design (later transferred to MockPlus)

ixd-dayah

Dayah, intense attention.

ixd-nisa

Nissa, trying to apply the Triadic colour

ixd-yong

Yong, measuring the size of the panels. This guy, most of the time, work in silos.

Have a look at the outcome, and provide your input so that they can improve.


WORLD OF DESIGN (RESOURCES)

Useful resource e-links related to ‘Interaction Design’
Interaction design and product design portfolios from some of students (alphabetical_lastname)
IxD Resources: journals, conferences, magazines, workshop, websites
10 great sites for UI design patterns
Sample IxD lab projects from https://ixdlab.itu.dk/category/research-projects/

18 free excellent user persona templates: https://www.mockplus.com/blog/post/user-persona-template/?r=trista

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s