Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
83 views

Assignment 1

This document outlines an assignment for a Human Computer Interaction course to build a user interface for searching a dictionary using HTML, CSS, and JavaScript. Students are asked to design their interface using Donald Norman's model of design and draw screen mockups. They then implement the interface, showing a scrollable list of words initially and updating it based on user search input. Students must submit a zip file of their code and assets along with a report listing their design process and including screenshots of their mockups and implemented interface.

Uploaded by

Hamza
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
83 views

Assignment 1

This document outlines an assignment for a Human Computer Interaction course to build a user interface for searching a dictionary using HTML, CSS, and JavaScript. Students are asked to design their interface using Donald Norman's model of design and draw screen mockups. They then implement the interface, showing a scrollable list of words initially and updating it based on user search input. Students must submit a zip file of their code and assets along with a report listing their design process and including screenshots of their mockups and implemented interface.

Uploaded by

Hamza
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

HCI CS421 PAGE 1

HUMAN COMPUTER INTERACTION


ASSIGNMENT # 1
(DEADLINE: 01-11-2021)
NAME: ___________________________ REG#: ____________________________

COURSE CODE: CS421 INSTRUCTOR: MUHAMMAD SAJID ALI

TOTAL MARKS: 100


------------------------------------------------------------------------------------------------------------------------------

USER INTERFACE DESIGN AND IMPLEMENTATION


This problem set asks you to build a small user interface that searches a list of words from
dictionary using the set of core technologies that drive most modern web applications, namely
HTML, CSS, and Javascript. We provide some backend code that does the heavy lifting (actually
loading the word list and searching it).

Interface Design (40%)

 List down the activities you will perform


 Design your interface according to Donald Norman Model process
o E.g. divide your interface into three stages, Goal, Execution and Evaluation
 Draw screen(s) on paper or use any online protoyping tool

Implementation (60%)
 Implement the screens you have designed using HTML, CSS and Javascript
 Show all words in a list on screen when interface opens for the first time
HCI CS421 PAGE 2

o Your list should be scrollable


 Your list on screen should update when user type and restore when search is empty
 Also show the number of words system found while user is typing and vice versa

Note: You must show atleast two iterations between execution and evaluation for achieving
desired goal

What to Hand In

Package your completed assignment as a zip file (named, your_regno-HCI-AI.zip) that contains all
of your HTML, JS, and CSS (including the JSON data). This zip file should also include your
assignment report.

List your collaborators in the comment at the top of word-finder.html. Collaborators are any
people you discussed this assignment with. This is an individual assignment, so be aware of the
course's collaboration policy.

Here's a checklist of things you should confirm before you hand in:
 Make a fresh folder and unpack your zip file into it
 Make sure your collaborators are named in word-finder.html
 Make sure all assets used by your code are found in the fresh folder and load successfully
 Make sure that the page renders correctly in at least two modern, standards-compliant
web browsers (Firefox, Chrome, Safari)
 Your report in word or pdf format that will contain
o List of activities you performed as per Donald Norman Model
o Screenshots of the interface you draw before implementation
o Implemented design screenshots with explanation

You might also like