Transcript Dr. Thomas Website

Dr. Thomas Website
User Interface Design
Comp 6620
Rahul Potghan
Sonal Kulkarni
Abstract
The objective is to design and implement user interface for Professor Dr.
Thomas. The Project is to create a website for members and associates.
The website will be used as web presence for professor.
Following are the important aspects which should be included while
designing professor website:
•
•
•
•
•
•
•
•
Office location, phone number, and email address.
Professional credentials as they appear in the SOU catalog.
A list of the subjects they teach
Recent photograph.
Optionally, pages may also contain:
A list of professional publications.
Research projects and interests.
The professional affiliations.
Schedule
Project should take approximately 45 hours.
Week1 (Oct 12) Total work hours - 2
1 hour - Meet with Dr. Seals to gather requirements.
1 hour - Prepare the abstract and the tentative schedule for overall project. Keywords for lexicon.
Week2 (Oct 19) Total work hours – 5
1 hour - Read article and give 1/2 page summary (expected from each person in the group)
2 hour - Submit the detailed Wire Frame.
2 hour - Meet with the Dr.Thomas to refine requirements.
Week3 (Oct 26) Total work hours – 8
4hours - Conceptual design
2 hours- Interface Design
2 hours - one related article and summarize (one article for each group member)
Week4 (Nov 2) Total work hours – 4
2 hours - Write more details about project & background (1page)
2 hours – Summary of all papers and works.
Week 5 (Nov 9) Total work hours – 5
1 hour – Documentation and response from client and reading paper.
Week 6 (Nov 16) Total work hours – 5
5 hours – Testing website and reading paper
Week 7 (Nov 23) Total work hours – 6
6 hours –Documentation for final Report (1 phase)
Week 8 (Nov 30) Total work hours – 4
4 hours - Final Project report (Final Phase)
Final Week (Dec 7) Total work hours – 6
6 hours- End of Cycle with UI sanity testing by developers. Write more details about programming
problems encountered, language used, etc. (1-2pages) .submission of UI and 8 page final
submission for Development groups using CHI.
Hardware & Software Requirements
Following are the minimum requirements viewing this Web site o with
optimal results.
Operating Systems PC : Windows 98/2000/NT 4.0 (PII)
Macintosh: OS 8.1 (PowerPC)
Web Browser PC
: IE 5.5 SP1 Macintosh: IE 5.03,
Firefox, Safari, Chrome
File Compression PC : WinZip Macintosh: Stuffit Expander
6.01 Terminal Emulator Xwin32,
SecureCRT or SSH
Hardware Details
: P2, P3, P4, with minimum 128 Mb
RAM, minimum 1 GHz processor, 3 GB space
Lexicon
Following are the important keywords which will be used.
Index Page- Home page of website
URL- (Uniform Resource Locator) Address of a resource on the
internet.
Hypertext links- Hypertext, technique for organizing computer
databases or documents to facilitate the nonsequential retrieval of
information
Server- Network computer, computer program, or device that
processes requests from a client.
Tabs- Buttons on the page, which on click will take to other page
associated with button name.
Software Process that will be used for this project
RAD: Refers to the type of Software development process, which minimizes the preplanning phase, and results in more rapid software development lifecycle.
As in our project we will first builds preliminary data models and business process
models as per the client requirement. Prototyping then will be useful to us and users
to verify those requirements and to formally refine the data and process models.
Iterative Process: Iterative development means creating increasingly functional
versions of a system in short development cycles. Each version is reviewed with the
client to produce requirements that feed the next version
In our Project we will be using more of iterative process as it will have following
advantage
• repeated synchronization yields piece-wise integration
•early insight into inter-component interaction
• working software early
Wireframe
A website wireframe is a basic visual guide used in interface design to suggest the
structure of a website and relationships between its pages.
Wireframe separates the graphic elements of a Web site from the functional
elements in such a way that Web teams can easily explain how users will interact
with the Web site.
Next slide is the snap shot of the current website which does not look appropriate.
In the Slide number 3 we have presented wireframe for the Dr. Thomas website,
which just show the simple layout of home page and important links on it.
Snap Shot of Current Website(OLD)
Low tech
Prototype
Image
AU LOGO
search etc
Home
Teaching Research Publication
Faculty
Image
Student
Useful
Links
Personal
Info
Contact
info
Title
Contents
home
syllabus
lectures
Publication
Resources
Assignments
Useful
Links
1
2
3
4
Projects
Etc
Wireframe above fulfill all the functional requirements of the website which is lacking in current
website. All the design applications which are of key importance in faculty webpage are included
to demonstrate design aspects of website.
Wireframe-High Tech Prototype
Wireframe-High Tech Prototype, page 2
Alternative wireframe-2
Task Scenario
• In the previous design webpage doesn’t have information
organized.
• Research, Vita & Course information missing
• Also if new user will visit website he have to browse through
pages to look for contact information.
So following slides have important functionality steps
so that user will go to site and he will have access to
contact information, available courses, Research,
curriculum vita, study materials.
Functional Requirements
• The website should provide easy access to
information regarding the office hours of the
faculty member to the students.
• The website should enable students to access the
lectures and related study materials.
• The website should provide information about
the courses offered by the faculty member.
• The website is required to contain information
about the research interests of the faculty
member.
Alternative Design- User visit on page and he has all easy access to contact info,
important links
Top Bar has
important tabs
Easy access to
contact
information
Important
Links
User will just go to Research Page for more details
Details shown after
clicking “Reseach” tab
Alternative Design
Top Page
Easy access to
contact
information
Important
Links
Bottom Page
Access to all Important
Resources on home Page
Article citation
1) Shneiderman B, Web Science: A Provocative Invitation to
Computer Science, communications- ACM,2007 50(6) 25-27
http://www.cs.umd.edu/~ben/ShneidermanCACM6-2007.pdf
2) Shneiderman B, Promoting Universal Usability with Multi Layer
Interface Design, ACM,2004 109-116
http://www.cs.umd.edu/~ben/ACM-CUU2003.pdf