SE365 SW aspects of the Human Computer Interaction IS 336 User Interface Design & Implementation Basit Qureshi

About! What is this course What would you learn Course Specs & assessments What is expected from you Preamble!

What is this course?

What is this course SE365 Human Computer Interaction IS 336 User Interface Design & Implementation

Human-Computer Interaction (HCI) the end-user of a program the others they work or communicate with Computer the machine program runs on split between clients & servers Interaction user tells the computer what they want computer communicates results So far you have probably studied lots about Computers, but little about Humans and Interaction. This course will concentrate on how these three areas come together.

Part of application that allows people User Interfaces (UIs) Part of application that allows people to interact with computer to carry out their task User vs. Customer vs. Client user is a term only used by 2 industries  bad! customer – person who will use the product you build client – the company who is paying you to build it HCI = design, prototyping, evaluation, & implementation of UIs

What would you learn?

What would you learn Course Description: Introduction to the concepts underlying the design of human-computer interaction: usability, direct manipulation, systematic design methods, user conceptual models and interface metaphors, design languages and genres, human cognitive and physical ergonomics, information and interactivity structures, design tools and environments. This course teaches how HCI affects the overall design of interfaces. The course covers four major parts: the foundation, the design process, models and theories, and thinking outside the box.

Course Learning Outcomes Course Learning Outcomes CLO1: Describe many factors and concepts that take into place when designing usable interactive computer systems. CLO2: Recognize human factors, need and issues in user interaction design. CLO3: Apply user-centered approach to interaction design by following guidelines, design rules and principles. CLO4: Evaluate user interfaces by conducting usability testing and other evaluation methods. CLO5: Build a group project incorporating user centered design approach.

HCI Approach to UI Design Give Examples of Tasks/Activities: activity: learning history high level taskl: - writing a paper - drawing a picture low level task (operation): - copying a word from one paragraph to another - coloring a line “People change their knowledge as they perform, i.e., they learn”

Specs & Assessments

Specs & Assessments Text

Specs & Assessments Resources Website: Others: info.psu.edu.sa/psu/cis/biq/hci LMS Others: Lectures, Notes, Links, Videos, Projects submissions

Specs & Assessments Assessments Exams: 50% Projects: 40% 10% = Major (Week 5) 40% = Final Projects: 40% Dry assignment(1) 5% (week 3) 4 Step assignments 35% (part of project) Activities: 10% 1 point each (10 activities)

Specs & Assessments Content: topics List Week Topic 1-3 Fundamental Concepts 4-6 Plan Requirements Gathering 7-11 Story boarding Prototyping 12-13 Design Principles 14-15 Evaluation & Reflection

What is expected from you?

With Flipped Class Approach

Commitment Reading: 1-2 hrs per week Browsing: 1-2 hrs per week Interviewing/recording: 1-2 hrs per week Trying & Testing: 1-3 hrs (during projects)

Some slides have been heavily influenced or embedded within based on Prof. James Landay @ Stanford University slides for course given in 2018 Preamble!

Hall of Fame or Shame? Page setup for printing in IE5

Page setup for printing in IE5 Hall of Shame! Page setup for printing in IE5 Page preview nice, but Problems codes for header & footer information requires recall! want recognition no equivalent GUI help is the way to find out, but not obvious

Later Versions of IE Fix This What is the tradeoff of this new design?

Asiana Airlines interface for sending email or SMS from plane Hall of Fame or Shame? Asiana Airlines interface for sending email or SMS from plane

Hall of Shame! Asiana Airlines interface for sending email or SMS from plane Cool, but text entry using this input device is tedious crashes often Lost the strong brand value for me

weather.com Hall of Fame or Shame? Weather.com What is the user trying to do (most commonly) when coming to this site? What is the FIRST THINGS your eye is drawn to? (called the “first read”)

what is the “first read”? Hall of Shame! weather.com what is the “first read”? videos advertisements not weather! Weather.com What is the user trying to do (most commonly) when coming to this site? What is the FIRST THINGS your eye is drawn to? (called the “first read”)

Hall of Fame or Shame? bing.com/weather A friend from MS said, try the new Bing Weather! Better… but?

Hall of Fame! bing.com/weather good! bad! less clutter eye drawn to current weather bad! feels boring A friend from MS said, try the new Bing Weather! Better… but?

Hall of Fame or Shame? weather.yahoo.com Better How? But still?

Hall of Fame! weather.yahoo.com good! bad! aesthetic clean typography & icons bad! image is 1st read A friend from MS said, try the new Bing Weather! Better… but?

Hall of Fame! iOS yahoo weather A friend from MS said, try the new Bing Weather! Better… but?

Hall of Fame! iOS yahoo weather good! aesthetic clean typography & icons image recedes to background w/ flick A friend from MS said, try the new Bing Weather! Better… but?

Major part of work for “real” programs Bad user interfaces cost Why is HCI Important? Major part of work for “real” programs approximately 50% Bad user interfaces cost money 5% satisfaction  up to 85%profits finding problems early makes them easier to fix reputation of organization (e.g., brand loyalty) lives (Therac-25) User interfaces hard to get right people are unpredictable intuition of designers often wrong Studies have shown that the design, programming, and evaluation of the UI can take up to 50% of the project time and cost for a wide range of commercial and in-house software Nearly 25% of all applications projects fail. Why? overrun budgets & management pulls plug others complete, but are too hard to learn/use Solution is user-centered design. Why? easier to learn & use products sell better can help keep a product on schedule finding problems early makes them easier to fix! training costs reduced

Who Creates UIs? A team of specialists (ideally) graphic designers interaction / interface designers information architects technical writers marketers program managers test engineers usability engineers researchers (ethnographers, etc.) software engineers hardware engineers industrial designers customers In this course you will wear the hats of many of these specialists.

How to Design and Build Good UIs UI Development process Usability goals User-centered design Design discovery Rapid prototyping Evaluation Programming

User Interface Development Process Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Discovery Design Exploration Evaluate Production Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Work together to realize the design in detail Evaluate with Customers Storyboard Review & Iterate Design Definition: - Design Problem Statement - Targeted User Roles (Who) - Targeted User Tasks (What) - Design Direction Statements Proposal: Demos/ Lo Fi Prototypes (How) Specification: Hi Fidelity, Refined Design - Based on customer feedback - Foundation in product reality - Refined Design description based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli

Design Thinking Process We will organize our work in CS147 with the Design Thinking Process popularized by ideo and the Stanford d.school

Iteration At every stage! Design Prototype Evaluate

Design is driven by requirements what the artifact is for not how it is to be implemented e.g., phone not as important as mobile app A design represents the artifact for UIs these representations include (?) screen sketches or storyboards flow diagrams/outline showing task structure executable prototypes representations simplify Write essay start word processor write outline fill out outline Start word processor find word processor icon double click on icon Write outline write down high-level ideas .

Usability(?) According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments This doesn’t mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals

Usability/User Experience(UX) Goals Set goals early & later use to measure progress Goals often have tradeoffs, so prioritize Example goals(?) Learnable faster the 2nd time & so on Memorable from session to session Flexible multiple ways to do tasks Efficient perform tasks quickly Robust minimal error rates good feedback so user can recover Discoverable learn new features over time Pleasing high user satisfaction Fun DO THIS ON THE BOARD!!!

User-centered Design “Know thy User” Cognitive abilities perception physical manipulation Memory Organizational / educational job abilities Keep users involved throughout developers working with target customers think of the world in users terms `

Design Discovery Needfinding & Task Analysis Observe existing practices for inspiration Make sure key questions answered Ethical questions in design w/ underserved communities ChoreoLab observed/interviewed dancers in studios…. and out in the streets ...

Unpacking the Needfinding ChoreoLab

Develop Point of Views (Person + Insight + Challenge) Brainstorm on How Might We Solve November 10, 2015 We met a homeless guy on a fishing boat, who just a year ago was given a second chance at life We were amazed to realize that thanks to the boat owner’s mentorship, trust, and display of the fishing lifestyle and connection to nature, he has turned around his life from drug addict without a job to someone with success and compassion It would be game-changing if all of us could take a risk to see a spark in others and nurture it into a purposeful transformation.

Sketching & Storyboarding 1. Idea generation, Pick 3 or 4… and show in depth Parcel tagbuster Phocus

Sketching & Storyboarding 1. Idea generation, Pick 3 or 4… and show in depth Parcel tagbuster

Concept Videos Illustrate context of use rather than specific UI Quick & inexpensive Forces designers to consider details of how users will react to the design

Concept Videos: Planning Storyboards SmartSenior

There isn’t even technology shown in this video… it is telling the story of the idea

Rapid Prototyping Build a mock-up of design so you can test it Fantasy Basketball Build a mock-up of design so you can test it Low fidelity techniques paper sketches cut, copy, paste Interactive prototyping tools HTML, Balsamiq, Axure, proto.io, Sketch+Marvel, Modao, etc. UI builders Expression Blend + Visual Studio, Xcode Interface Builder, etc.

Evaluation Test with real customers (participants) Low-cost techniques Wanderlust Test with real customers (participants) w/ interactive prototype low-fi with paper “computer” Low-cost techniques expert evaluation walkthroughs online testing All about trying to measure what works and what does not

Learn through experience: Project Each team will propose a UI-oriented project fixing something you don’t like or completely new idea based on team needfinding Theme Identify a theme of project all projects mobile/wearable/off desktop Groups 3-4 students to a group work with students w/ different skills/interests SE371 (Web) CS387 (Mobile App dev) Others groups meet in class & studio (Wednesdays) weekly Cumulative apply several HCI methods to one interface Team’s will be graded as a team, but individuals who let their team down will be graded appropriately at the end of the term If you do NOT have the time to take this course and do the intense project, please drop it now. Especially students who may be from other programs beyond engineering who aren’t used to the time commitment, please make sure you can do your share. Autumn 2018 Design Thinking for User Experience Design, Prototyping & Evaluation

HCI an important part of most of today’s software Summary HCI an important part of most of today’s software Getting the interface right is hard, but… Solution in Iterative Design including repeated cycles of Design Prototyping Evaluation This course, we learn Interactive design by Theory and Practice!