Human Computer Interaction

1. Human Computer Interaction Human Computer Interaction (HCI), coined by Card, Moran and Newell In the 1983 book, “The Psychology of Human-Computer Interaction. The basic goal of HCI is to improve the interactions between users and computers making them more usable.

2. Principles of User Interface Design The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another.

3. Principles of User Interface Design The simplicity principle The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.

4. Principles of User Interface Design The visibility principle The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don't overwhelm users with alternatives or confuse with unneeded information.

5. Principles of User Interface Design feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

6. Principles of User Interface Design tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.

7. Principles of User Interface Design tolerance principle:

8. Principles of User Interface Design The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

9. Planning Materials • 1) Brain storm • What is your goal of the project? A website, an interactive experience, a searchable destination, a simple reference website? • Who is the target audience for this website/media project? • How do they normally consume web/media content? • What technical issues might arise do to your target audience and your chosen delivery path • What ‘style’ or ‘image’ appeals to your demographic? • What ‘style’ or ‘image’ does your company want to project?

10. Planning Materials 2) Creative Brief The client or company head, project manager should write a one – two sentence explanation of what the purpose and intent of the website/media project is. Anything more than two sentences needs to be revised Make sure your description meets the goals of the audience and their specific needs.

11. Planning Materials • 3) Outline • Group similar ideas together • Have no more than 5-7 groups, this may require subsections • Put global needs in their own category

12. 00. MiamiAdSchool.com 1.0 Request Info 2.0 Admissions 2.1 Advisors 2.2 How to Apply 2.3 International Students 3.0 Student Work 4.0 F.A.Q. 5.0 Creative Genius 6.0 Financial Aid 7.0 Locations 7.1 Berlin 7.2 Buenos Aires …. 7.3 Agency Internship 7.3.1 Beijing 7.3.2 Boulder 7.3.3 Chicago … 8.0 Programs 8.1 Pop Culture Engineering 8.2 Art Direction …. 9.0 Global Features 9.1 Search 9.2 Subscribe 9.3 Google + 9.4 Twitter 9.5 Facebook 9.6 LinkedIn Outline Example

13. Planning Materials 4) Sitemap

14. Planning Materials 5) Story Board

15. Planning Materials 6) Web Mockup

16. How the Internet Works Network Downloading HTML packets

17. The Web Development Process

18. Static vs Fluid Designs Static Design

19. Static vs Fluid Designs Mockup: Fluid Design 955px width 1300pxwidth

20. Responsive Web Design Squarespace.com

21. Responsive Web Design Squarespace.com

22. Web DevelopmentHTML vs HTML5 vs Flash vs CMS • HTML 4.01 • Last modified July 1999 • Advantages • First advantage it is widely used. • Every browser supports HTML language. • Easy to learn and use. • Free, does not cost money to develop with • Disadvantages: • It can create only static and plain pages so if we need dynamic pages then will have to intergrate additional programming files such as .js or asp.net • Security features are not good in HTML.

23. Web DevelopmentHTML vs HTML5 vs Flash vs CMS • HTML5 • Released August 2009 • Advantages • Native support for audio, video, no 3rd party • Plug-in required • Native support for animation using <canvas> • Better security than HTML 4.01 • Includes geo-location information • Local storage • Offline Storage • Increased web semantics

24. Web DevelopmentHTML vs HTML5 vs Flash vs CMS • HTML5 • Disadvantages • Evolving standard, things may change tomorrow • Not everyone has access to HTML5 by default

25. Web DevelopmentHTML vs HTML5 vs Flash vs CMS • Flash • Advantages • Allows for dynamic interface such as animation and expression interfaces. • No browser differences in positioning or text formatting as may occur with HTML or CMS websites due to parsing of HTML or CSS. • Vector based, so can scale without degradation to the website’s apperance • Prevents against content theft

26. Web DevelopmentHTML vs HTML5 vs Flash vs CMS • Flash • Disadvantages • High load times • Bad for SEO • Can not be read by devices (like the iPhone or iPad) that do not have Adobe Flash Player installed. • Difficult to update • Not good for websites with large volumes of content • Requires the purchase of Adobe Flash

27. Web DevelopmentHTML vs HTML5 vs Flash vs CMS • Content Management System (CMS) • advantages • A CMS makes it easier for people to create, edit and publish content on a website. • By using content management system websites structure can be easily changed • A CMS can facilitate better content security. It can control who is allowed to publish to the website, and who is allowed to see what content. • Content Management system reduces time-to-publish, allowing you to get content published faster. • Automaticallys creates RSS feed • Extremely SEO friendly.

28. Web DevelopmentHTML vs HTML5 vs Flash vs CMS • Content Management Systems (CMS) • disadvantages • A CMS can prove to be extremely heavy especially for small and simple websites, and may not be a first choice for most small website owners. • The webmaster may also need to have expert coding capabilities to be able to configure or add to existing infrastructure. • To migrate a site, there needs to be available CMS on the technology where the site is being migrated to. Without this, the migration is cumbersome and difficult at best, and most times downright impossible. • Needs to be updated, similar to software updates • Some CMS are not free • Requires a higher level of server hosting

29. Questions to Determine What can I expect from my users in terms of technology? What is the scale of this project? What features do I need for this project? Concern about SEO and website search-ability?

31. Desktop Resolutions 1366 x 768 23% 1024 x 768 16% 1280 x 800 11% Smaller than 1280 x 800 50% http://gs.statcounter.com/?PHPSESSID=0p93ms3tsrg5g5etdlp6i68sp6#resolution-ww-monthly-201206-201306-bar Mobile Screen Resolutions iPhone 320 x 480 Nexus One 360 x 600 Galaxy Nexus 360 x 640 HTC Venus 800 x 480 HTC Touch Pro 480 x 640 320 x 480 is seen as the industry standard at this moment http://gs.statcounter.com/?PHPSESSID=0p93ms3tsrg5g5etdlp6i68sp6#mobile_resolution-ww-monthly-201206-201306

32. Content Preparation Raster images Images for HTML, HTML5 and CMS systems must be converted to either a GIF (graphical image format) JPG ( joint picture expert group) PNG (portable network graphic) Flash websites can contain any raster format Vector Images HTML5 and Flash can work and maintain vector format such as ai and eps. HTML5 must have vector files outputted to SVG format (scalable network graphic) HTML and CMS must have vector images converted to raster format

33. Visual Properties of HTML5 • HTML5 • Drop shadows • Rounded Rectangles • Gradients • SVG vector graphics • Drop and Drop capability • HTML5 % in the real world • 85% have an internet browser capable of having HTML5

34. Designing for Specific Devices • Think about properties of the device you are designing for • iPad design/Tablet Design • designs that flow vertically rather than horizontally • make designs that flow left to right, like a book • make links that are buttons, rather than text links, which are hard to interact with your finger. • Smart phone design • Use thick text that stands out • Try to avoid heavy video/audio content due to slow data networks. • http://greenpronetwork.com/chinese/dates.html

35. Preparing Raster Images in Adobe Photoshop • Images should be exported as • JPEG: • good for photorealistic images • GIF: • good for images with less than 256 colors • Animation • Transparency • PNG • good for photorealistic images • transparency Photoshop > File > Save for Web

36. Responsive Web Design Squarespace.com • Things to consider for responsive web design • Scalable items • logos • images • font sizes • Position • navigation • items • image galleries

37. Content Preparation • Audio/Video • HTML/CMS: Audio and video are embedded in a third party plugin such as an Adobe Flash Player wrapper or Real Player • Flash Websites: Audio and Video are embedded within the final output files, any video, audio format is fine • HTML5: • Audio must be converted to • Mp3 • Ogg • wav • Video must be converted to • Mp4 • webM • ogv

38. Typography • Web Fonts: Typefaces that are commonly installed on major operating systems including Windows, OSX, Linux, iOS, Android, Windows Mobile Phone, and Rim. • Arial • Helvetica • Times New Roman • Courier New/Courier • Palatino • Garamond • Bookman • Avant Garde • Verdana • Georgia • Comic San MS • Trebuchet MS • Arial Black • Impact Flash Websites embed any font used within the final swf product file

39. Typography • Online Font Foundaries: Allow developers to add javascript to their web structure that will download a font from an third party server to install on users devices that currently do not have access to the typeface. • Paid Services • Typekit.com • Typotheque.com • Free Servicesgoogle.com/webfonts • Pros • Gives users a larger range of typefaces to choose from. • Cons • Typeface may cost money to purchase, or license • Increases the load time of your website/mobile application

40. Hyper Text Markup Language (HTML) • Developed in the 1980s by Tim Burners-Lee to help unify the internet experience • The standard structuring language for the internet • Maintained and updated by the World Wide Web Consortium w3.org • Can be written to any application capable of formatting text • Microsoft Notepad • Apple Text Edit • Textwrangler • Notepad ++ • eMac • etc • Requires the .html or .htm extension to properly parsed • Current version is HTML5

41. HTML

42. Text Formatting <article> defines an article <p> paragraphs <strong> bold <em> italic <s> strike through <u> underline <h1> most important heading <h6> least important heading <address> denotes an address for an individual <blockquote> denotes a blockquote <sup> superscript <sub> subscript Please reference HTML.zip

43. Referencing External Documents

44. Referencing External Documents <a href=“webpage.html”> Link Text </a> <a href=“form.pdf”> Download </a> <imgsrc=“bannerad.jpg” />