UNIVERSITY OF CRETE FACULTY OF SCIENCES AND ENGINEERING COMPUTER SCIENCE DEPARTMENT COURSE CS-464 (OPTIONAL) HUMAN COMPUTER INTERACTION Instructor: Constantine Stephanidis
Team work In this phase you are called to design digitally high fidelity prototypes The prototypes DO NOT have to be interactive The prototypes can be created using any of the following tools: Pencil Justinmind Prototyper Adobe Fireworks Διαφάνεια 2
Some functions might require more than one screen You need to design them all Some functions (like those that are mentioned in the document) do not necessarily need to be on a separate page / screen It could be that some functions can / should be combined into a single page / screen The design should be as close as possible to the final version (e.g., fonts, colors, etc.) The design should be complete, i.e., Every page / screen should be completely designed (header, footer, etc.) and not just the main content Create your basic layout once and use it on the rest of the screens Use real data wherever needed (no Lorem Ipsum, no blah blah blah, etc) Διαφάνεια 3
During design the following dimensions should be used Web 1024x768 Mobile 320x480 Width should always be constant Height can change for pages that need scrolling Διαφάνεια 4
Obligatory Deliverables Prototypes for the Home page / screen, the Exhibition List and the Exhibit Details PNG or JPG images as they are exported from each respective tool Make sure the images have appropriate names and numbers E.g., 01_HomeScreen.png, 12_ExhibitionDetails.jpg, etc. Submission Friday, 18 th of March, 12:00 pm (noon) E-mail links to a file sharing service (e.g., Dropbox, Google Drive, OneDrive, WeTransfer, etc.) at hy464@csd.uoc.gr Διαφάνεια 5
Deliverables The prototypes that have emerged from the requirements document PNG or JPG images as they are exported from each respective tool Make sure the images have appropriate names and numbers E.g., 01_HomeScreen.png, 12_ExhibitionDetails.jpg, etc. Submission Monday, 28 th of March E-mail links to a file sharing service (e.g., Dropbox, Google Drive, OneDrive, WeTransfer, etc.) at hy464@csd.uoc.gr Διαφάνεια 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
Διαφάνεια 13
Διαφάνεια 14
Function: View details for a film Functional requirements: View Title View the picture / poster View film s duration Read the plot View movie s genre (Comedy, Drama, etc.) View the actors and the director Special awards should be shown The movie trailer should be available View film s rating Viewing rooms should be available View if movie is available in 3D View the show times View film s language and whether it is dubbed Enable the user to buy a ticket The user can add the movie to favorite Διαφάνεια 16
Download the Pro Edition (free for 30 days) http://www.justinmind.com/prototyper/download Additional widget libraries widgets that you can use are: Web Widgets http://d2ld3he4yll0xl.cloudfront.net/widgets/web-widgets-library.jpl Android KitKat http://d2ld3he4yll0xl.cloudfront.net/widgets/android-kitkat.jpl In the tab "My Widgets" select the first blue arrow to import libraries Διαφάνεια 18
Elements (widgets) you can include the design (e.g., buttons, textboxes, etc.) The screens of your project The screen on which you plan Properties that can be modified for each selected widget Διαφάνεια 19
Justinmind Projects has the extension *.vp Select the correct dimensions for the platform for which designing To create a new screen : File à New à Screen Give representative names on screens (no: Screen 1, Screen 2, etc.) Using the simulate button you can quickly preview your design Διαφάνεια 20
Fileà Save as Images Select only the screens Choose output folder Διαφάνεια 21
Download from: http://pencil.evolus.vn/downloads.html The Pencil Projects end with *. ep Properties that can be changed for each selected widget Elements (widgets) you can include the design (e.g., buttons, textboxes, etc.) Διαφάνεια 22
For each function create a new page / screen Give representative names on the screens (not: Screen 1, Screen 2, etc.) Select the correct dimensions for the platform for which planning Make sure the Background is not transparent Διαφάνεια 23
Document à Export Document Output format: Rasterized graphics (PNG files) Pages to export: All pages in the document Διαφάνεια 24
It follows the logic of Photoshop Similar toolbars Similar information organization (e.g., layers, groups, etc.) Download the trial, which is free for 30 days https://creative.adobe.com/products/fireworks The Fireworks Projects end with *.fw.png Διαφάνεια 25
Create New Project File -> New Enter the appropriate dimensions on the platform for which you are designing Save Project Keep the suffix *.fw.png Διαφάνεια 26
Toolbar Properties that can be changed for each selected object Διαφάνεια 27
Object properties For each selected object, the properties that can be modified vary Διαφάνεια 28
Common Library Pages Layers Align Useful Toolbars Διαφάνεια 29
Common Library It contains some ready widgets (e,g., buttons, checkboxes, etc.) and icons Attention: Changes made into those objects from the library are global For example if you use one of the ready-to-use buttons and change its label, then all the buttons that you have already included in your project will have the same label To avoid this, you have to untie the object from all other objects of the same type Right Click à Symbol à Break Apart Align Useful toolbar that help you with object alignment Διαφάνεια 30
Pages All the different screens / pages of your project For each mockup you will create a new page / screen Give representative names on the screens (not: Screen 1, Screen 2, etc.) Capabilities Right Click à New Page Create a new screen Layers Right Click à Duplicate Page Create a copy of the selected screen They are the objects that make up one screen Similar to Photoshop layers They can be categorized into folders, formulate groups, copied, etc. Διαφάνεια 31
Grouping Layers Helps items management (copy, move, etc..) Holding the Shift you can select multiple objects simultaneously The Right Click -> Group Example: Grouping of a rectangle, an image of a label and to generate a button On the tool bar, the black arrow allows the selection of the entire Group, while the white arrows allows the selection of the contents of Διαφάνεια 32
1. File à Export 2. Enter the following : Export: Pages to Files Export as: Images Pages: All Pages 3. Choose Options Add Prefix: #(01,02,03) File Type: JPEG Better Quality 4. Save Διαφάνεια 33