UNIVERSITY OF CRETE FACULTY OF SCIENCES AND ENGINEERING COMPUTER SCIENCE DEPARTMENT COURSE CS-464 (OPTIONAL) HUMAN COMPUTER INTERACTION Instructor: Constantine Stephanidis
Team assignment Final deliverables: Friday, March 10 2017: Low fidelity prototypes of your system Wednesday, April 5 2017: High fidelity prototypes of your system Tuesday, May 2 2017: Interactive prototypes Submission Through email at hy464@csd.uoc.gr HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 2
Low fidelity prototypes for the Home Page of your system The login page is not considered the home page You must submit prototypes of the home page both for the desktop computer as well as for the smartphone Examination / meeting with assistants Friday, 24 th of 2017 Bring printed versions of the prototypes The assistants will evaluate grade your progress and guide you regarding the next deliverable HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 3
You can create your low fidelity prototypes: A. On paper (Α4 sheets) or B. In electronic form with the use of the balsamiq prototyping tool (https://balsamiq.com/) HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 4
In case you design the prototypes in electronic form the minimum horizontal resolution should be: PC 1280px Smartphone 414px The horizontal resolution must always remain fixed The vertical resolution can change for the pages that need scrolling HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 5
Some functions may need more than one screen You must design them all It is not necessary some functions to constitute a separate page / screen It is possible that some functions can / should be combined in one page / screen For the high fidelity prototypes the design should be as close as possible to the final version (e.g., fonts, colors, etc.) The design must be complete, meaning every page / screen must be designed fully (header, footer, etc.), not just the main content Do the basic layout once and use it for the rest of the screens Use real data wherever needed (not Lorem Ipsum, not blah blah, etc.) HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 6
What is a prototype? Partial or complete representation of an interactive system Mainly, a design activity that uses scientific methods to study the effectiveness of specific designs Prototypes provide information during the design process by helping designers to choose the best solution HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 8
Allows the visualization of the system requirements Enables user involvement early in the development process Enables an interactive development cycle Facilitates timely control Provides a way to control issues relating to the product, which cannot be answered through general research and instruction Provides a concrete tool for evaluating an idea for an interface HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 9
Provides a common reference point for all members of the design team, for users and marketers Can be used to obtain useful feedback from users Improves the quality and completeness of the functional specification of a product It increases the chance the product behaves as expected Significantly reduces the total cost of developing a product HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 10
Case-dependent, primary concerns may be any of the following: The flow of screens for important tasks The overall metaphor and how it will be applied The design of important screens The layout of all screens Alternative metaphors or design ideas HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 11
We suggest that you start with the most important and frequent tasks. You cannot do all things at once, and if you allow yourselves to think of every possible combination or insignificant task from the very beginning, you might not be able to move on later in the next phases of the project. Of course, you need to consider that even insignificant tasks, tasks switching procedures and peripheral tasks that connect your application with other parts of a task flow, must be part of your product and must be an integral part of the prototype in the end. HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 12
HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 13
HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 14
Function: Information about a movie Functional requirements: Must display the Movie s Title Must display an Image / poster Must display the Movie s Duration Must display the Movie s case senario Must display the type (Comedy, Drama, etc.) Must display the Starring cast and the Director Special Awards must be shown The trailer must be available to watch Screenshots of the movie must be available Age Rating must be displayed Must display the projection rooms Display if the movie is in 3D Must display the time schedule Language and movie dubbing must be available The user can buy a ticket The user can add the movie to his favorites HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 16
Function: Information about a movie Functional requirements: Must display the Movie s Title Must display an Image / poster Must display the Movie s Duration Must display the Movie s case senario Must display the type (Comedy, Drama, etc.) Must display the Starring cast and the Director Special Awards must be shown The trailer must be available to watch Screenshots of the movie must be available Age Rating must be displayed Must display the projection rooms Display if the movie is in 3D Must display the time schedule Language and movie dubbing must be available The user can buy a ticket The user can add the movie to his favorites HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 17
Latest version 3.5.7 (30 days free trial) Download: https://balsamiq.com/download Balsamiq Mockups is supported for Windows and Mac. Linux users can run the.exe via Wine HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 19
Widgets that you can use in your prototypes (e.g. buttons, textboxes, etc.) The screen on which you design Your project s mockup screens Property editor of the selected widget HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 20
Balsamiq Mockup files suffix is *.bmpr To create a new Project: File New Blank Mockup To create a new copy of your current screen: File New clone of current Mockup Your screen names should be representative (not: Screen 1, Screen 2, etc.) HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 21
File Export current mockup to PNG File Export All Mockups to PNG Select the Output Folder HY-464: Αλληλεπίδραση Ανθρώπου - Υπολογιστή Διαφάνεια 22