IxD 307 Fall17

Ali Fesçi, Ali Can Savuran, Aslıhan Berfin Daşdemir, Atakan Çalışkan, Ayda Ekin Mete, Aysu Çelikkaya, Begüm Mete, Busenaz Gökbulut, Damla Usluca, Elif Melisa Boz, Eymen Müftüoğlu, Hasan Bartu Imamtorunu, Kayacan Uğraş, Macit Batuhan Özalp, Mert Ürüncü, Merve Şimşek, Ömer Ferhat Teket, Şefik Yaman Özuyguntaş, Sevinç Karagöz, Sezen Sözer, Tuğçe Vatan, Umut Direk, Yaren Cirit

with Ceren Kayalar, Daniele Savasta

Slack channel: ixd307f17

Calendar

1 2 3 4 5 6 7 8
19 Sep 22 Sep 26 Sep 29 Sep 3 Oct 6 Oct 10 Oct 13 Oct 17 Oct 20 Oct 24 Oct 27 Oct 31 Oct 3 Nov 7 Nov 10 Nov
9 10 11 12 13 14 15
14 Nov 17 Nov 21 Nov 24 Nov 28 Nov 1 Dec 5 Dec 8 Dec 12 Dec 15 Dec 19
Dec
22 Dec 5 Jan

19 Sep

^

Lecture

Lecture 01 Introduction to Interaction Design

Activity 1: Photoshop Toolbar

To be submitted before 22 Sep

Homework 1: IxD masters

To be submitted before 22 Sep

Reading 1

Compulsory:
What is interaction design, Gillian Crampton Smith

Interaction14 Keynote, Gillian Crampton Smith

Optional:

So you want to be an interaction designer, Robert Reimann

What is interaction design, Teo Yu Siang

Students' participation 20/23

22 Sep

^

Creative Mornings Session #1

TED Talk by John Maeda: How art, technology and design inform creative leaders (watch)

Supplementary reading from an interview with John Maeda: If you want to survive in design, you better learn to code

Recommended reading and watch: Maeda summarizes every year the design trends in tech world in SXSW by his Design In Tech reports. Follow the blog for the details.

Reviews

On Homework #1 and Activity #1

Activity 2: Drive Me Home

In class submission

#algorithm

Activity 3: Drawing dictation

In class submission

#interpreter, #compiler

Recommended Weekend Activity

Spare yourself 1 hr, grab a cup of coffee and dive into Processing: Hello Processing!

Students' participation 20/23

26 Sep

^

Slack channel: ixd307f17

Activity 4: Represent a machine as a system

In-class, hard-copy submission and discussion in class

#input, #output

Coding 1: Processing 101 - Hello Processing 1

  • Family tree of processing
  • Proper installation, check sketchbook location
  • Getting familiar with the IDE: Menu, Toolbar, Tabs, Text editor, Message area, Console + Display window (canvas) println()
  • Sketchbook, sketch, .pde
  • Using properly: English IDE, no Turkish characters in sketch names, no spaces, under /ixd307f17
  • Basic shapes: line(), ellipse(), rect()
  • Setting canvas size: size()
  • Working with screen coordinate system
  • Drawing order: top to bottom line-by-line background()
  • Drawing with color: fill(), noFill()
  • To change the transparency, use the fourth parameter (alpha value) of fill () with values 0 to 255 (0: transparent -> 255: opaque):

    fill(R, G, B, A); /* R: red, G: Green, B: Blue, A: Alpha */
  • Shape properties: smooth(), noSmooth(), stroke(), strokeWeight(), noStroke()

    To change the transparency, use the fourth parameter (alpha value) of stroke () with values 0 to 255

  • Processing Reference: website or local ref. on your computer

Homework 2: Code + Read + Watch

To be submitted before 29 Sep

(update on 29 Sep: Read + Watch is postponed! New due: Oct 3)

Students' participation 17/23

29 Sep

^

Creative Mornings Session #2

TED Talk by Don Norman: 3 ways good design makes you happy (watch)

Activity 5: Brainstorm interaction loves and hates

In-class, hard-copy submission and discussion in class

#brainstorming, #crit

Review

Homework 2: Recoded Art

Coding 2: Processing 101 - Hello Processing 2

  • Introduction to interactivity
  • Core blocks: setup(), draw()

    Don't forget the curly brackets: {...}

  • Mouse position: mouseX, mouseY
  • Default framerate: 60 FPS (frames per second) - that's how many draw() calls occur per second!
    current frame number: frameCount
    15 fps vs 30 fps vs 60 fps
  • Clearing the canvas every frame using background()
  • Comments: // or /* */ // This is a one line comment
    /* This comment
    continues for more
    than one line */
  • Processing Reference: website or local ref. on your computer

Coding exercise:

  1. Draw a circle in the center of the canvas. Change the circle (color, size, etc.) as the cursor moves around the screen.
  2. Upload your sketch folder as a .zip file to Drive/c1-circles
    file naming: YourNameSurname.zip

Homework 3: Code + Read + Watch

To be submitted before 3 Oct

Students' participation 15/23

3 Oct

^

Review

Homework 3: Read + Watch

Diagrams 1-2-3-4

Lecture

Principles of Interaction Design:

  1. Visibility
  2. Feedback
  3. Constraints
  4. Consistency
  5. Affordances
  6. Mapping

Activity 6: Brainstorm Affordances

In-class, performance and discussion in class

#brainstorming, #affordance

Activity 7: Flowchart Making Spaghetti (a.k.a Kiymali/Peynirli Makarna)

In-class, hard-copy submissions 1-2 and discussion in class

#flowchart, #conditionals, #actions

Coding 3: Processing 101 - Hello Processing 3

  • Conditional statements: if(expression){
    //statements
    }
    if(expression){
    //statements
    } else {
    //statements
    }
  • Define your own variables in Processing as
    DataType name = value; int a; /* defines the variable 'a' of type 'int' */
    a = 5; /* assigns 5 to the variable 'a'*/
    a = 10; /* you can change the variables value anytime you need */
    int b = 5; /* defines the variable 'b' of type 'int' and assigns the value 5 */
  • Processing variables on mouse interaction: mousePressed, mouseButton, LEFT, RIGHT
  • Current screen width and height in pixels: width, height
  • Processing Reference: website or local ref. on your computer

Example from class:

source code: Drive/[sample-code]/p3_variables_conditionals.pde

Homework 4: Read + IxD

To be submitted before 6 Oct

Students' participation 17/23

6 Oct

^

Creative Mornings Session #3

TED Talk by Tony Fadell: The first secret of design is ... noticing (watch)

Review

Homework 4: Read + IxD

Activity 8: Flowchart Using Izmirim Card Yuklematik Machine

In-class, hard-copy submission and discussion in class

#flowchart, #conditionals, #actions

Coding 4: Processing 102

Example from class: Bounds of a circle and a square

This example is an upgraded version of the one we did in-class. You can also find the bounds of the circle using dist() function. Notice the area between the square and circle is changing the color if the mouse pointer enters the rectangular space. The color of the circle doesn't change until the mouse pointer enters circle's area.

read more on this topic and try some examples:
Drive/[sample-code]/[RF2010]bounds-of-a-circle-and-rectangle.pdf
(ref: [RF2010] Getting Started with Processing)

source code: Drive/[sample-code]/p4_bounds.pde

Homework 5: Code

To be submitted before 10 Oct

Students' participation 19/23

10 Oct

^

Review (50mins)

Homework 5: Code

Post on the whiteboard post-its of "what went wrong", "what went right"

Organizing your work

Best/worst case review

break

Review (50mins)

Coding 5: Processing 102

Example from class: Drawing

break

Apostrophe and Primes

Homework

P1-1 | Redesign Izmir Metro Vending Machine: Paper Prototype

To be submitted before 13 Oct

Readings/Watchings

Students' participation 15/23

13 Oct

^

Crit #1

P1-1 | Redesign Izmir Metro Vending Machine: Paper Prototype

Homework

Recommended Read and Watch

To lead your re-design process, establish a language and clarify your thoughts:

P1-2 | Redesign Izmir Metro Vending Machine: User Test

To be submitted before 17 Oct

Students' participation 22/23

17 Oct

^

Crit #2

P1-2 | Redesign Izmir Metro Vending Machine: User Test

Homework 5.5: Read (5 items)

  1. Complete Beginner's Guide to Interaction Design: Definition, Methodologies, Daily Tasks, People to Follow, Tools, Associations, IxD Books
  2. The Disciplines of Interaction Design Author/Copyright holder: Thomas-pluralvonglas. Copyright terms and licence: CC BY-SA 3.0
  3. Android's design guidelines: what are they, and why should you care? (recommended to read before P2 starts!)
  4. A Day in the Life of a UX Designer
  5. Prototyping: A Day in the Life of an Interface Designer, Annette Wagner (Product Engineering, Apple Computer Inc.) under Drive/[readings].
    Read and create a storyboard of her life in Apple as in the article linked above (see 4).
    tools: A3 page, pen+paper
    Submit the picture of the storyboard to Drive/[h5.5]-(read:Wagner) as YourNameSurname.pdf before Oct 20, Friday
    This Homework will count as extra points to your participation grade

Students' participation 20/23

20 Oct

^

Review

Coding 6: Processing 102

P2 | Design Brief by Vestel

Presentation of Vestel represented by Dr. Sultan Kaygin Sel:

(project aim and requirements are in the presentation)

Homework

Recommended readings

  • Slides from Jon Kolko on How to conduct a competitive analysis
  • Who is Jon Kolko?
  • Ch4: Conducting Competitive Research from the book UX Strategy by Jaime Levy

    P2-1 | Redesign Vmarket App: Competitive Analysis

    To be submitted before 24 Oct

    Students' participation 20/23

  • 24 Oct

    ^

    Review

    Lecture

    Mobile Patterns

    Practice

    Coding 7: Processing 102

    Homework 6: Code

    To be submitted before 27 Oct

    Students' participation -/23

    27 Oct

    ^

    Practice

    Initial observations on the VMarket

    Homework

    Recommended Read and Watch

    To lead your the homework P2-3, establish a structure and clarify your thoughts:

    Further Readings

    P2-2 | Analysis of VMarket and decomposition in its components/patterns

    To be submitted before 31 Oct

    P2-3 | Interview preparation (describe)

    To be submitted before 31 Oct

    Students' participation -/23

    31 Oct

    ^

    Review P2-2 (50 mins)

    Lecture (30 mins)

    Interview as contextual inquiry

    slides from the lecture

    Practice (30 mins)

    Questions card sorting (15 mins)

    Collaborative organization of the questions

    Read all the questions and select some that sparks your interest

    Coding 8: Processing 102 - Media 1

    Homework 7: Code

    1. Load three images, at least one PNG with transparency, and create a collage that changes its composition (position, color, transparency etc.) with mouseX and mouseY. Be creative!
    2. Upload to Drive/h7-composition as ixd307f17_h7_YourNameSurname.zip before Nov 3, Friday 8:30am (File limit 2 MB)

    Example: (move your mouse on canvas)

    Students' participation -/23

    3 Nov

    ^

    Practice

    Presenting research documents

    Report Project Planning

    Re-presenting a Persona

    PersonaPres

    Coding

    Homework 7 review

    Introduction to function

    Basic symbol created by function Throwing Dice (font+functions)

    Homeworks

    1. P2_4 Interview
    2. P2_5 Persona

    Recommended Read and Watch

    Students' participation -/23

    7 Nov

    ^

    Review

    Interview+Persona

    Practice

    Generating Insights

    Wireframing

    Homeworks

    1. Complete/Redo the interview (according to the crits)
    2. Present the output of the interview (example)
    3. Write your own brief (examples to come)
    4. Sketch the "homepage", "app page", "notification" in your favorite software (at least two different design proposals)

    Students' participation -/23

    10 Nov

    ^

    PreCrit

    Practice

    Corrections

    Students' participation -/23

    14 Nov

    ^

    P2 | Milestone Presentation @Vestel

    • heuristic / interviews / persona
    • design brief / wireframe / visuals

    Students' participation -/23

    17 Nov

    ^

    P2 | Milestone Presentation @Vestel - Review

    • interviews / persona
    • design brief / wireframe
    • Presentation videos on Youtube

    Check your plan

    Project Management for User Research: The Plan @NielsenNormanGroup

    Practice: Persona

    Practice: Wireframe

    Homeworks

      1. Persona

      1. Re-create your persona according to the resources we gave in class, get into the character! (see the persona section above)
      2. Design and fill the persona page with your new content

      2. Wireframe/Paper Prototype

      1. Start/Complete the wireframes as Paper Prototype
      2. Control that all the functions required by your brief and persona are implemented in the wireframe
      3. You will create your flowmap in this step of your homework already, so ... take notes. To design the wireframes, you need to think about the flow of the app regarding your actions.
      4. Cut the canvases (phone template) so that all the pages are in the same size (10cm width circa)

      Helpful resources

      3. Flowmap

      For the flowmap you might want to use one of these software to facilitate the process, or work on your favorite software:
      Draw.io (for web)
      Microsoft Visio (for win only)

      Examples:

      1. Observe the flow (how to move from one sketch to the other/s)
      2. Insert directional arrows which links the actuator (button) to the generated screen
      3. Explore all the possibilites (going backwards, accessing help, tapping on menu button and toolbars, ...) and generate new canvas if needed
      4. Check that everything is connected and all the steps are visible and clear
      5. Scan/take a picture of all the screens
      6. Title and number all the screens starting from the welcome/home page

      4. User test (a.k.a testing the paper prototype with a real person)

      Prep yourself:

      Examples:

      1. Write at least 3 tasks which are essential to demonstrate the functionalities of your project
      2. Prepare the screens so that you can easily access them
      3. Do a test run with the closest people outside your group to be sure that the tasks can be completed and you are ready with all the screens and the interactions between them
      4. Find 3 people that match/similar to your persona profile (don't involve the people you already interviewed before)
      5. Prepare the recording devices needed (avoid glass reflections, glares, color noises in the scene)
      6. Start the test (duration: max. 10 mins/participant)
      7. Remember your P1 user tests! One of you will act as the phone to place the screens according to the user's actions
      8. Present the project as your brief definition (app repository vs promotional/tailored) to the person
      9. Ask the person to complete the 3 tasks without your guidance (simply provide the screen linked to the action executed by the person)
      10. Thank the person and repeat with the other 2 people
      11. Don't edit the video (just cut beginning to end of the test)
      12. Upload the result to Youtube and paste the link in the P2 | Redesign Vmarket App Drive doc. Deadline: Nov 20, Monday by 15:00 (we will need 30x7=210 mins to check your videos)

      Students' participation 17/23

    21 Nov

    ^

    Lecture and Practice

    • Good app re-design examples from Behance:
      1. "Break the rules" of an existing app- Snapchat
      2. From Lo-Fi and Hi-Fi Wireframes- case study: a Fitness app
      3. Redesign steps well presented / clear design- Yelp iOS app
      4. Redesign steps well presented / bold design- UPC University app see on Marvel
    • Interactive prototyping tool suggestion: Marvel
      You may even use the mobile app of Marvel with your paper prototypes to check the flow of your app before designing the visuals.
      For the final prototype, please use the web version of Marvel (more options, more flexible)
      If you feel adventurous, there are more tools to discover for prototyping!
    • Add some "delight" to your work: Microinteractions

    P2 | Review before Pre-Crit

    • Evaluate your own work with the forms we've provided
    • User-test review per group, suggestions on visuals

    Homework

    • See the UX Checklist as a guide to wrap up your project
    • Great guide to design app screens: Pixel Perfect Precision document @ustwo
    • Prepare a presentation of your project work according to the suggestions you've received in class:
      - Research(Analysis, Interview, Brief), Plan(Persona, Flowmap), Explore(Wireframes), Create(Style Guide/Moodboard/Identity), Evaluation(User-Test), Create(Visual Proposal, UI Elements, Gestures), Finalise(Interactive Prototype), Delight(Micro interactions, Transitions)
      - Booklet, Presentation
    • If you need more time to finish some parts in your design, please focus on displaying a sample properly in your presentation
    • Every group will have 15 mins to present, prepare yourselves accordingly

    Students' participation -/23

    24 Nov

    ^

    P2 | Pre-Crit

    Starts @9:00, 15 mins / group

    • summary of the first presentation
    • micro-interactions / walkthrough
    • interactive prototype

    Homework

    Submission by Nov, 26 midnight (sun->mon). We want to check your presentations and booklets on Monday and give you feedback.

    Students' participation -/23

    28 Nov

    ^

    P2 | Final Presentation (Crit) @Vestel

    • summary of the first presentation
    • micro-interactions / walkthrough
    • interactive prototype

    Students' participation 20/23

    1 Dec

    ^

    Lecture

    Introduction to Game Design

    Indie Game: The Movie (also available on Netflix)

    Critical Eye on Indie Games - Game Elements: Aesthetics, Story, Technology, Mechanics

    Games we've covered in class:

    Homework

    1. Reading:
      • Excerpt from The Art of Game Design by Jesse Schell under Drive/[readings]/[Schell2015]TheArtofGameDesign-Excerpt1.pdf
      • Please read the pdf, it introduces the methods to analyse games. Starting from p.14, you will be introduced to 4 basic elements of games: Aesthetics, Story, Technology, Mechanics
    2. Pick one video game that you enjoy playing, and write 1-2 A4 page of analysis per game considering the 4 basic elements and a screenshot of the game.( See the "Space Invaders" example in the reading ). Don't forget to define the genre of the games. A complete list of game genres
    3. Submit the document in pdf format to Drive/h8-game-analysis as ixd307f17_h8_YourNameSurname.pdf before Dec 5, Tue 13:30

    Students' participation 15/23

    5 Dec

    ^

    Lecture

    Game Elements: Mechanics

    Practice

    Tic Tac Toe Re-Design

    Coding 10: Processing 103 - Motion 1

    This example represents the fluid continuous motion of a pacman shape restricted with the canvas boundaries. Bonus: Try to press the left mouse button :)

    Download the code on Github

    Homework 9: Code

    1. You should draw 4 circles with different colors, starting from 4 corners of the screen traveling through the center with different speeds. When you click and hold the mouse button, the balls should freeze. And when you let go of the mouse, the balls go back to their initial position and keep moving.
    2. Don't use the noLoop() function, it interrupts the processing drawing loop, try to stop and start the movement using coordinates only
    3. You may use mouseReleased() function or you may try different solutions. Be creative!
    4. Bonus: try using random() function to randomize the speed
    5. Upload to Drive/h9-move-freeze-release as ixd307f17_h9_YourNameSurname.zip before Dec 8, Friday 8:30am (File limit 2 MB)

    Students' participation 18/23

    8 Dec

    ^

    Review

    Issues encountered with "Move Freeze Release" homework: code from class on Github

    Coding 11: Processing 103 - Motion 2

    DVD Screensaver in-class example on Github

    Homework 10: Code

    Some retro Action / Arcade Games to remember:

    A more recent game based on similar basic rules as DVD screensaver > Game but has a complex structure: Agario (2015)

    1. Design a simple, fast-paced Action / Arcade Game based on the DVD screensaver example we've started in-class. Keep the visuals simple, use circles, rectangles and lines. Use simple typography to keep score or show other basic data. Start with the least amount of rules.
    2. Guide for the homework:
      • single player
      • one protagonist (movement using arrow keys: up-down, left-right)
      • one (or more) antagonist (self moving)
      • keep score using "food": eat randomly placed "food" on canvas without getting caught by the antagonist, increase your score accordingly
        BONUS - make it fun: you may place some food that cause the antagonist or protagonist to move faster/slower, shrink/grow etc.
      • limit the time: GAME OVER after 10 secs. Example countdown timer code on Github
        BONUS - make it fun: at some specific second in gameplay, you may make the display darker (black screen or a darker overlay) but the game continues in the background, etc.
    3. You will define "eating food" and "colliding with the antagonist" by checking the boundary conditions of the objects. Remember the p4_bounds.pde we did in class on Oct, 6. This time you will check both the "protagonist and food", "protagonist and antagonist" boundaries to define the clash condition!
    4. You may define more rules to your game, but keep it simple first and try to make it playable.
    5. You may define your own functions to make the code modular.
    6. Your submissions (.pde files) should start with a comments section where you define the game rules and controls. Use the comments block: /* */
    7. Upload to Drive/h10-catch-me-if-you-can as ixd307f17_h10_YourNameSurname.zip before Dec 12, Tuesday 13:30 (File limit 2 MB)

    Students' participation 19/23

    12 Dec

    ^

    Review

    Issues faced in coding: HW 10 - catch me if you can

    1. Collision
      • eat food (increase score)
      • get caught by the antagonist (game over or another punishment mechanism)
    2. Timer

    We will continue these topics in the upcoming classes

    Lecture

    Game Elements: Story

    Practice

    In-class practice on analyzing Movies/Games scenarios: Game Design Brainstorming

    Homework: P3 | Indie Game Design

    Recommended readings:

    1. P3_1 | Brainstorming: Fill up the game design brainstorming page we gave you in-class, and upload a clear picture to your group's Drive folder (under p3-indie-game-design/) as p3_1-brainstorming.pdf
    2. Don't forget to give a name to your group and your game! :)
      How to name a video game in 5 steps
      Choosing the right name for your game
    3. P3_2 | Paper Prototype: Non-digital prototyping of game ideas using paper, pen, scissors. (see example)
      Define and make use of the game elements carefully: players, objectives, rules, resources, game states, interaction, theme.
      Outcome: paper prototypes & video of game play.
      Goal: initial playability check.
      Upload the video of your gameplay to Youtube and place the link to the main document (P3 | Indie Game Design) in Drive/p3-indie-game-design under p3_2-paper-prototype column.
    4. All to be submitted before Dec 15, Friday 9:00 am

    Students' participation 20/23

    15 Dec

    ^

    Review

    Lecture

    Game Elements: Aesthetics

    Homework: P3 | Indie Game Design

    Recommended resources:

    1. P3_3 | Aesthetics: Storyboard, Moodboard, Character Design
    2. Please consider these steps for your storyboards
    3. More storyboard examples
    4. Create one document including storyboard, moodboard, character design for your game and upload to your group's Drive folder (under p3-indie-game-design/) as p3_3-aesthetics.pdf
    5. All to be submitted before Dec 19, Tuesday 13:30

    Students' participation -/23

    19 Dec

    ^

    Review

    Practice

    Homework

    Students' participation -/23

    22 Dec

    ^

    Review

    Practice

    Homework

    Students' participation -/23

    5 Jan

    ^

    Final Exam / Jury

    Students' participation -/23