INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.
-
Upload
ferdinand-allen -
Category
Documents
-
view
223 -
download
1
Transcript of INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.
![Page 1: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/1.jpg)
INTERACTION DESIGN
JMA 464/564MWF 12:00 – 12:50
College Hall 205
![Page 2: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/2.jpg)
JMA 464/545 - Instructor
• Dr. Bill Gibbs
• Associate Professor in Journalism & Multimedia Arts.
• Ph.D. in Instructional Systems from The Pennsylvania State
University.
• Office 341 College Hall• Office hours – Tues 11:00-2:00, WF 10:30 – 12:00 and by appointment
• Phone – 412 - 396-1310
• E-mail – [email protected]
![Page 3: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/3.jpg)
JMA 464/545 - Purpose
• Introductory course about IxD & HCI
• Overview of IxD, HCI, UX, and usability
• Review IxD, HCI, UX methods and issues
![Page 4: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/4.jpg)
JMA 464/545 – Course goals
• Develop understanding of IxD, human computer-interaction (HCI) and user-centered design & development.
• Develop understanding of UX, user-experience practices.
• Discuss development processes and tools.
![Page 5: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/5.jpg)
JMA 464/545 – Course goals
• Explain methods for IxD research & development.
• Demonstrate general principles underlying effective interaction design and navigation control.
• Use equipment and software to observe interaction.
![Page 6: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/6.jpg)
JMA 464/545 – Applications & Tools
The course focuses on:
1)Interaction/HCI
2)User observation
3)Design & Development based on observation/study.
![Page 7: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/7.jpg)
JMA 464/545 – Applications & Tools
• In class we use a variety of tools to prototype interactions.
![Page 8: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/8.jpg)
JMA 464/545 – Applications & Tools
For observations, we will use:
• Observer XT
• Arrington Research Eye-tracker
• TechSmith – Morae
• Human Factors Facility
![Page 9: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/9.jpg)
BEGIN TO OBSERVE EVERYDAY THINGS……how might you improve them?
![Page 10: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/10.jpg)
What might happen?
![Page 11: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/11.jpg)
What might happen?
Pull hood latch
Proximity
![Page 12: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/12.jpg)
What might happen?
![Page 13: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/13.jpg)
What might happen?
Is the coffee maker on or off?
How do you fix it?
![Page 14: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/14.jpg)
![Page 15: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/15.jpg)
Returns Web-wide results, which confuses users
![Page 16: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/16.jpg)
CNN now implements search in this way.
![Page 17: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/17.jpg)
Mapping. Good or Bad?
A B C D
![Page 18: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/18.jpg)
Is this a better design?
![Page 19: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/19.jpg)
Mapping – direct relationship between the device design and its functionality.
![Page 20: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/20.jpg)
Poor designs?
• Which bottle ?- Insulin
Not sure what these mean? Cadillac car What do you think happens?
Source: http://www.baddesigns.com/
![Page 21: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/21.jpg)
People often take the path of least resistance.
Try to figure out what the least resistant paths are before pouring concrete.
Source: http://www.baddesigns.com/
![Page 22: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/22.jpg)
People often take the path of least resistance. In a similar way, Amazon makes it easy to buy additional items.
![Page 23: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/23.jpg)
People often take the path of least resistance. In a similar way, Amazon makes it easy to buy additional items.
People want information, services, entertainment… Your design should accommodate their needs as efficiently and effectively as possible.
![Page 24: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/24.jpg)
Logical constraint
![Page 25: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/25.jpg)
Physical constraint
![Page 26: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/26.jpg)
Physical constraint
What happens here?
Source: http://www.baddesigns.com/
![Page 27: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/27.jpg)
Physical constraint – not visible
What happens here?
Source: http://www.baddesigns.com/
Sometimes constraint is not visible.
![Page 28: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/28.jpg)
Task: Return movie (DVD) to Redbox
I think… similar to
![Page 29: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/29.jpg)
Task: Return movie (DVD) to Redbox
Ok, drop it in … but
![Page 30: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/30.jpg)
Task: Return movie (DVD) to Redbox
Must press Return A DVD first
What might be a better approach?
![Page 31: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/31.jpg)
Task: Return movie (DVD) to Redbox
Why not a physical constraint instead of this? Return a DVD is activated when inserting DVD.
![Page 32: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/32.jpg)
What might happen here?
Source: http://goodexperience.com/tib/b/product_design/
![Page 33: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/33.jpg)
Labels???
If the switch is pointing to "Off", it's really "On", and vice versa.
Source: http://goodexperience.com/tib/b/product_design/
![Page 34: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/34.jpg)
Labels???
The arrows relate to direction, not the final state of the switch.
The words “ON/OFF” suggest the final state but they are positioned inversely to switch function.
Source: http://goodexperience.com/tib/b/product_design/
Direction, not state of control
![Page 35: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/35.jpg)
Labels???
A simpler design is better.
The switch affords/suggests how to use it.
Additional labels may add confusing information.
![Page 36: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/36.jpg)
How do we design for different devices?• By looking at examples in the physical world, we can
become informed about how to design for:
• Web• Mobile devices• Etc.
![Page 37: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/37.jpg)
We’re use to this…
![Page 38: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/38.jpg)
What about this…
![Page 39: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/39.jpg)
What about this…
![Page 40: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/40.jpg)
What do these controls mean?
And the controls…
![Page 41: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/41.jpg)
Design and use | Questions• How do people use different devices?• What can observing their use tell us about how we should
design and develop?• How do different devices influence behavior?
![Page 42: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/42.jpg)
Design and use | Questions• How do we design for the initial User Experience (UX)?• How do we design for the entire User Experience (UX)?
![Page 43: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/43.jpg)
Observe human-computer interactions
Example 1: Observer Example 2: Observer Example 3: Morae
Example 5: Florida State Example 6: EyeTrackExample 4:Post
Example 7: CNN - EyeTrack Example 8: Student EyeTracks
Example 9: ViewPoint Analysis
![Page 44: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/44.jpg)
![Page 45: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/45.jpg)
JMA 464/545 – Readings
Interaction Design: Beyond Human Computer Interaction by Rogers, Sharp, and Preece. Publisher: John Wiley & Sons; 3rd Edition (2011) ISBN 978-0-470-66576-3
iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark. Publisher: O’Reilly (2010). Online at http://ofps.oreilly.com/titles/9780596805784/
• Additional readings will be assigned throughout the semester and will include:
• Journals articles
• Web articles
• Book chapters
![Page 46: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/46.jpg)
JMA 464/545 - Assignments1. Practice assignments
2. Interaction design activities
3. Group critique & re-design of device
4. Proficiency tasks: Eye-tracking, Morae, Observer XT (Fisheye)
5. Mini-application design, implementation, evaluation
6. Exam
7. IxD Investigation (Graduate students only)
![Page 47: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/47.jpg)
JMA 464/545– E-mailingE-mailing assignments/attachments.
• Must have your name
• E-mail address
• Title of assignment
• Label subject of e-mail
![Page 48: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/48.jpg)
JMA 464/545
• Class web site: http://www.jma.duq.edu/classes/gibbs/jma464-01/
• Rooms 205 & 345 Access
![Page 49: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/49.jpg)
JMA 464/545 – Before you go…
•Log into computer
![Page 50: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/50.jpg)
![Page 51: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/51.jpg)
DEFINITIONSHCI
![Page 52: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/52.jpg)
Defining the field• …a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and with major phenomena surrounding them.
• As defined by the Special Interest Group on Human-Computer Interaction (SIGCHI) of the Association for Computing Machinery (ACM)
![Page 53: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/53.jpg)
Defining the field• Human-Computer Interaction (HCI) is the study and the practice of usability.
• …understanding and creating software and other technologies that people will want to use, will be able to use, and will find effective when used.
John Carroll, 2001
![Page 54: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/54.jpg)
Defining the field• Rough characterization of HCI as a field. It examines:
• joint performance of tasks by humans and machines; • structure of communication between human and machine; • human capabilities to use machines (including the learnability of
interfaces); • algorithms and programming of the interface itself;• engineering concerns that arise in designing and building
interfaces; • process of specification, design, and implementation and
evaluation of interfaces; and design trade-offs.
• HCI has science, engineering, and design aspects.
![Page 55: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/55.jpg)
![Page 56: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/56.jpg)
Overview: topics• Logging on• Our servers• Using FTP• User folder and class folders• File Extensions
![Page 57: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/57.jpg)
User Name and Password• To connect to our servers from within either of our two
labs (205 or 345):• Ctrl-Alt-Delete• Username: YourLastName• PW: Given in class• You will be asked to change your password the first time you login
![Page 58: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/58.jpg)
User Name and Password• 8 characters or more• 1 UPPERCASE character• 1 number• 1 Special character ($, &) – no spaces
![Page 59: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/59.jpg)
Our Server
www.jma.duq.edu• Your private folder• It’s a subfolder of users folder
• www.jma.duq.edu/users/YourLoginName
• Save files (drag and drop files) while in either lab (CH205, CH345)
• You can also FTP to there from home…
![Page 60: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/60.jpg)
How do I access the server?• Access from either CH345 and CH205
• Start >> Computer (Z: Drive)
• \\jma1\users\username
• While in class, feel free to save to the net folder
![Page 61: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/61.jpg)
How do I access the server?
From dorm or home
ftp://www.jma.duq.edu/users/YourLastName
• Example: ftp://www.jma.duq.edu/users/gibbs/
• You will be prompted for your user name and password• Use the same name and password you used to login to
Windows
![Page 62: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/62.jpg)
How do I access the server?
You will be prompted for your user name and password – jma/username
![Page 63: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/63.jpg)
How do I access the server?
• Folders and files display• Transfer (put) files from your computer, • Download (get) files to your computer.
![Page 64: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/64.jpg)
USER FOLDERThe PUB folder
![Page 65: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/65.jpg)
www.jma.duq.edu
Folder
File
File
FileFile
PUB Folder
Folder
Your Space
User folder
![Page 66: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/66.jpg)
Folder
File
File
FileFile
PUB Folder
Folder
Your Space
All files for the
Web must be in PUB
All files for the
Web must be in PUB
User folder
www.jma.duq.edu
![Page 67: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/67.jpg)
How do I access the server?
• Your folder on server has a child folder named pub• Inside that folder you should create a folder for each
course that requires a web site• In this course, create a sub folder named JMA464
![Page 68: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/68.jpg)
The PUB folder
•You might create subfolders, for each course.
Double-click on pub
Right-click on any unused white area
![Page 69: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/69.jpg)
The PUB folder• Create new folder
• Name it your course name
![Page 70: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/70.jpg)
Web URL• The URL to your website(s) depend on how you structured your home
folder• Using earlier example
http://www.jma.duq.edu/users/gibbs/pub/JMA464/FileName.htm
• Assuming your file name is default.htm, or index.htm in the jma464 folder the address would be:
http://www.jma.duq.edu/users/gibbs/pub/jma464/index.htm
![Page 71: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/71.jpg)
FILE EXTENSIONS
![Page 72: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/72.jpg)
File Extensions• Windows-based computers vs. Mac• Index.htm
File Name
File Extension
![Page 73: INTERACTION DESIGN JMA 464/564 MWF 12:00 – 12:50 College Hall 205.](https://reader036.fdocuments.net/reader036/viewer/2022062516/56649dd25503460f94ac827c/html5/thumbnails/73.jpg)
Turning File Extensions on in Windows
• Start>>Control Panel>>Folder Options>>View>> uncheck Hide Extensions for known file types