Introduction to CS60171 (2009)
-
Upload
markvanharmelen -
Category
Education
-
view
1.280 -
download
1
description
Transcript of Introduction to CS60171 (2009)
![Page 1: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/1.jpg)
CS60171 Interactive System Design
Mark van Harmelen
![Page 2: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/2.jpg)
What’s design?
• Design is a process where we – Start with multiple, often conflicting,
requirements and constraints– Make tradeoffs– Produce ‘something’ at the end of the process
![Page 3: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/3.jpg)
What’s interactive system design?
• A process where we – Start with multiple, often conflicting,
requirements and constraintsuser requirementssystem capabilities
– Make tradeoffsusability and engineering tradeoffs
– Produce ‘something’ at the end of the processa design for / a prototype of an interactive system
![Page 4: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/4.jpg)
Tradeoffs in interactive system design
functionality
user interfacescope
![Page 5: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/5.jpg)
How not to do it
• Big fat requirements documents‘never mind the quality or usability, feel the weight!’
Leads to …..
![Page 6: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/6.jpg)
![Page 7: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/7.jpg)
Goals, roles, tasks, results, things to do work with
How to do it: Mutual learning
Tech stuff: code, datbases, internet, standards,….
Designers’world
Users’world
![Page 8: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/8.jpg)
What the users add
• Front end design factors, roles, tasks, etc• Validation of our developing design for– Scope– Functionality– User interface
• Before we write a single line of code– Less code change, less refactoring
![Page 9: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/9.jpg)
How to do it: Rapidly at low cost
![Page 10: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/10.jpg)
How to do it: The cycle
Design
Test
Redesign / improve
![Page 11: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/11.jpg)
Learn
• Background theory
• Practical time-efficient design methods
• People skills, how to work in groupshow to work in industry
(the most important bit?)
![Page 12: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/12.jpg)
The method
• The Bridge-UML• A multistage process • We involve
users and designers in a 3 to 5 day workshop and produce avalidated interactive system design before writing any code
![Page 13: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/13.jpg)
![Page 14: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/14.jpg)
test and improve
![Page 15: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/15.jpg)
resize
![Page 16: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/16.jpg)
Hey, we are developers, we like a nice design process(won’t the users mess it up?)
requirements / specification process
![Page 17: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/17.jpg)
Producing UML from the Bridge
Use caseModel(Use caseDiagrams)
Dynamic model(ActivityDiagrams, …)
Logical model(ClassDiagrams)
![Page 18: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/18.jpg)
A well-founded method
![Page 19: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/19.jpg)
Past course: Computer prototype
![Page 20: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/20.jpg)
Led to……
![Page 21: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/21.jpg)
This year…..
• Web app design
• Mobile app design
![Page 22: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/22.jpg)
Scope for
• Very technical students
• Human-interested students
![Page 23: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/23.jpg)
Finally…..
• Experiential learning = learning by doing
• Authentic learning = real project experience
• Fun !
• ‘Best course I have ever attended’
• ‘All courses should be like this’
![Page 24: Introduction to CS60171 (2009)](https://reader033.fdocuments.us/reader033/viewer/2022061112/545643c2b1af9f37608b4c09/html5/thumbnails/24.jpg)
Check us out
• http://hedtek.com
• MSc projects in an internship framework
• Looking for one or more graduates from this course