Computer/Human Interaction
The Programming Task Your software company is creating a simple communication system for authors and their followers. This system will allow an author to communicate with his or her followers elsewhere in the world. While there are many ways for authors to communicate in the modern world, we will concentrate on a simple blog interface that allows an author to post articles and the followers to post replies to an article.
Your task is to design a user interface and write the first fully functional prototype of the user interface for this piece of software. The features which should be supported by this version of the program are:
• The author is the only user allowed to post articles. • When the author successfully posts an article, there should be feedback indicating success. This may be a simple as showing the article viewing interface with the new article. • Each follower must choose a login name that must be entered into the program before the follower is allowed to read the author's articles and post replies. No anonymous followers are allowed. • When a follower successfully posts a reply, there should be feedback indicating success. This may be a simple as showing the article viewing interface with the new reply. • All replies to a particular article must be "displayed" with the article in some way. E.g., immediately following the article or linked in the article. The interface must make the connection between an article and its replies readily apparent. • Each post (articles or replies) must carry identification of who posted it and the date and time of the post.
03/21/2018 Page 1 of 5 D. Hwang
• Error messages should be displayed if important information is omitted, or the user does the wrong thing. However, the interface also can prevent the wrong thing from happening in some cases.
To make your task simpler so you can concentrate on the design process, there are a few features which do not necessarily have to be implemented, though you can, if you want to:
• The blogging program interface must work, but the program can use local files for to simulate communication. This is not a networks course. • Article storage can be done in simple files. This is not a database course. • You do not need to check that login names are unique, or keep a database of login names. That is, only one author is required, and the author's login name is significant and may be hardcoded into the system. The replies can be identified with whatever name the user logs in with. • Only one level of replies to an article is required. That is, you do not have to support replies to replies. Systems that do support replies to replies must make the connections apparent in the interface. • There is no need to delete or archive old articles, but you may choose to do so if you want. Or else you may choose to display only the last 10 messages, for instance. Do whatever you think makes the interface most usable. • Articles and replies do not have to be displayed automatically by the program. You can make the user press a Refresh button, for instance. However, working out how to make articles and replies appear without the user explicitly doing anything would add to the usability of the interface.
You must write your system using one of the following tools: • HTML5 (HTML/CSS/JavaScript) and PHP • MS Visual Studio C# UWP
Some other notes: • Everything you put in the interface must be implemented. No useless buttons, please. Unimplemented interface options will be considered negative features of the project. • Your system will be assessed first on user interface and user experience considerations, and secondly on the features. A system that provides the minimum features but an excellent interface with corresponding excellent report may well score better than a system that has many features, but a poor interface and/or poor report. • Presentations and system demonstrations will be in KC136. Note that the projector is standard 4:3 format. C# programs that are to be run on the instructor's station must use the Anniversary Edition SDK.
Report Logistics Each group is to produce an approximately 20page technical report. It must include a cover sheet that states the title of the project, give the names of all members of your group with brief descriptions of the contributions of each group member, and contains the following declaration signed and dated by all members of the group:
In accordance with the University of Evansville Honor Code, we attest that the project we are submitting is completely our own work, and that we have not received nor given any unauthorized aid on this project.
03/21/2018 Page 2 of 5 D. Hwang
The report should consist of an introductory paragraph summarizing the report and the following four sections:
Contextual Inquiry and Analysis: Choose the Target Users You are to choose a specific set of target users who will use your program. Design your interface with those users in mind. The more carefully you think about the needs of that set of users, and the more your interface meets those needs, the better grade you will receive. For this class, you should postulate a world before blogs and your blogging application is the first one. For those with less creative skills, you could start with a world where there are only message boards like the prototypes you developed previously.
Here are some suggestions about sets of authors and followers you might choose:
• Elementaryschool teachers and their students • Computer science professors and their online programming classes • Healthcare professionals and their patients in remote locations • Journalists traveling the world and their readers • Music bands and their fans • Antarctic explorers and their sponsors • Firsttime book authors and their readers
Other sets of users may be chosen, but they must be cleared with the instructor first.
Provide a system concept. This will have a strong influence on the rest of the project, so think carefully about this. Recall that a system concept is a statement typically 100 to 150 words in length that provides shared understanding among project participants. It is a mission statement for the new system to be developed that can be used to explains the system to outsiders . Recall an effective system concept statement answers at least the following questions:
• What is the system name? • Who are the system users? • What will the system do? • What problem(s) will the system solve? • What is the design vision and what are the emotional impact goals?
There are at least two work roles for this project: author and follower. Develop and explain a flow model showing any other work roles or machine roles, how information flows among the components, and how entities communicate in the hypothetical world before blogs.
Requirements Extraction and DesignInforming Models Create two usage scenarios (of the current, blogless world): one for an author writing a message and one for a follower reading and replying to a message. The scenarios may be written as prose or as a task interaction model. Identify the barriers.
Conceptual and Detailed Design Develop and describe at least two user personas (one author, one follower). Once your personas are developed, conduct a couple ideation sessions for the interface of the new blogging system. Then create some storyboards that illustrate possible usage and some detailed wireframes to show layouts. Provide a summary of the design process with accompanying sketches and wireframes as needed.
03/21/2018 Page 3 of 5 D. Hwang
Prototyping and Evaluation This section should include: • A description of the implemented prototype interface in terms of the user experience design. Include screenshots as needed. • A description of how at least two rapid evaluation methods could used to evaluate your prototype. • A brief discussion of the advantages and/or problems with using the implementation tool you chose for the project from the user's point of view. I.e., how did the tool help or hinder your ability to build the interface you designed.
References There should be a list of references to in an appropriate format for any resources used in completing the project, including any web resources. Appropriate citations to these references are expected in the report.
Formatting There must be a coversheet described above. The margins should be 1 inch all around. Text should be in 12point font, single spaced, with a blank line between each paragraph. Each section should have a section heading in bold. The pages should be numbered.
Midproject report On Tuesday, April 10, a midproject progress report must be submitted to the instructor by 4:30pm. This report should include the following items:
• Drafts of the Contextual Inquiry and Analysis and the Requirements Extraction and DesignInforming Models sections of the final report. I.e. a description of the target users, a concept statement, information flow model (of current, blogless) world, and two user scenarios. • Progress on developing the design for the user experience. I.e., how far has the group gotten designing the system interface. • Progress on implementation. I.e., what parts of the project have been implemented, and what parts are left to be implemented. • One peer review form from each group member. These forms may be submitted to the instructor independent of the rest of the progress report. Individuals failing to submit a peer review form will be assessed a 10% penalty on the midproject report score.
Presentation Logistics All groups are expected to be prepared to make an approximately 20minute presentation on Tuesday, April 24, during class time. No makeups will be allowed. The following topics should be covered in the presentation:
• "Background" of target users via design personas • Discussion of the design decisions via usage scenarios, sketches, and wireframes • Demonstration of the prototype interface • Discussion of a proposal for evaluating the prototype interface
The presentation may be made by one or more persons in the group, but all group members must be present to answer questions regarding their project. Those absent without an acceptable excuse on April 24 will be penalized 10% of the presentation score.
03/21/2018 Page 4 of 5 D. Hwang
Final project submission Final project submissions are due Tuesday, May 1, by 2pm (scheduled final exam time). No late work will be accepted.
• HTML5/PHP submissions must be installed on csserver to be graded. • For C# submissions, the entire project folder should be submitted on a USB drive to the instructor.
Hand in the following items in hardcopy:
• A technical report as described above in 3ring binder. The instructor can provide one, if needed. • Basic instructions on how to run your prototype interface, including URL for HTML5/PHP projects. • A list of any changes you have made to your interface or implementation since your presentation • One peer review form from each group member. These forms may be submitted to the instructor independent of the rest of the final report. Individuals failing to submit a peer review form will be assessed a 10% penalty on the final report score.