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.

ScheduleProject should take approximately 45 hours. Week1 (Oct 12) Total work hours - 21 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 – 84hours - Conceptual design2 hours- Interface Design2 hours - one related article and summarize (one article for each group member) Week4 (Nov 2) Total work hours – 42 hours - Write more details about project & background (1page) 2 hours – Summary of all papers and works.

Week 5 (Nov 9) Total work hours – 51 hour – Documentation and response from client and reading paper. Week 6 (Nov 16) Total work hours – 55 hours – Testing website and reading paper Week 7 (Nov 23) Total work hours – 66 hours –Documentation for final Report (1 phase) Week 8 (Nov 30) Total work hours – 44 hours - Final Project report (Final Phase) Final Week (Dec 7) Total work hours – 66 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, ChromeFile Compression PC : WinZip Macintosh: Stuffit Expander 6.01 Terminal Emulator Xwin32, SecureCRT or SSHHardware 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 websiteURL- (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 pre-planning 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

WireframeA 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)

ImageAU LOGO

search etc

Teaching Research PublicationHome Student Useful Links

Personal Info

Contact info

Faculty Image

Title

home

syllabus

lectures

Publication

Resources

Assignments

Projects

Etc

Contents

Useful Links1234

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.

Low tech Prototype

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.

Easy access to contact

information

Important Links

Top Bar has important tabs

Alternative Design- User visit on page and he has all easy access to contact info, important links

Details shown after clicking “Reseach” tab

User will just go to Research Page for more details

Easy access to contact

information

Important Links

Top Page

Alternative Design

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