Human Computer Interaction

linencharmMobile - Wireless

Dec 10, 2013 (3 years and 8 months ago)

66 views

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.

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.

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.

Principles of User Interface Design

The simplicity principle

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.

Principles of User Interface Design

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.

feedback principle:

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.

Principles of User Interface Design

tolerance

principle:

Principles of User Interface Design

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.

The reuse principle:

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?

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.

Planning Materials

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


Outline Example

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

Planning Materials

4) Sitemap

5) Story Board

Planning Materials

Planning Materials

6) Web Mockup

How the Internet Works

Network

Downloading HTML packets

The Web Development Process

Static
vs

Fluid Designs

Static Design

Static
vs

Fluid Designs

Mockup: Fluid Design

955px width







1300px

width





Responsive Web Design

Squarespace.com

Responsive Web Design

Squarespace.com

Web Development

HTML
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.


Web Development

HTML
vs

HTML5
vs

Flash
vs

CMS

HTML5

Released August 2009


Advantages




Native support for audio, video, no 3
rd

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


Web Development

HTML
vs

HTML5
vs

Flash
vs

CMS

HTML5


Disadvantages



Evolving standard, things may change tomorrow


Not everyone has access to HTML5 by default


Web Development

HTML
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



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




Web Development

HTML
vs

HTML5
vs

Flash
vs

CMS

Web Development

HTML
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.



Web Development

HTML
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

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?






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


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



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



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


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



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

Responsive Web Design

Squarespace.com

Things to consider for responsive web design


Scalable items



logos



images



font sizes



Position




navigation



items



image galleries


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

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

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

T
ypotheque.com


Free Services

google.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














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

Hyper Text Markup Language (HTML)

HTML

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




Referencing External Documents

<a
href
=“
webpage.html
”> Link Text </a>

<
img

src
=“
bannerad.jpg
” />

<a
href
=“
form.pdf
”> Download </a>

Referencing External Documents