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

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)

Image AU LOGO search etc TeachingResearchPublicationHomeStudentUseful Links Personal Info Contact info Faculty Image Title home syllabus lectures Publication Resources Assignments Projects Etc Contents Useful Links 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, (6) ) Shneiderman B, Promoting Universal Usability with Multi Layer Interface Design, ACM,