UI代写:CS422 Developing User Interfaces

Introduction

虽然是做UI,但实际上一个交互作业,作品不限。偷懒的话只需要参考一下现有产品的交互,然后做一个类似的网页,满足作业中交互设计的基本需求即可。

Goals

The course project is an individual project that allows you to explore new ideas and new kinds of user interfaces. In essence, the project aims for you to produce work analogous to a conference paper in the domain of HCI, as might be submitted to an HCI-related conference such as ACM’s CHI conference.
The project thus involves implementation of a new user interface, writing up a description and results of the interface, and finally presenting the interface to the class during a “mini-conference”.

Finding an Idea

First you will need to decide on a project idea. You will be working on this idea for the rest of the semester, so try to find something that is of interest to you! Here are some rough guidelines for your project idea:

  1. Because we are aiming for a conference-like paper as the final product of the project, you should aim to develop a novel idea / user interface for a particular purpose, and/or to address particular deficiencies of existing systems with your new system. In particular, you should avoid very common, general systems that people use often (e.g., contact manager, calendar system, chat messenger, photo manager, etc.) – instead, be as creative as possible and try something different, and you will get more out the project. You are especially encouraged to design a user interface for a population that you are not part of. Some of the most interesting ideas come from considering subsets of possible users – e.g., what applications might be good for a pharmacist? coach? fireman? artist? pilot? parent? person with low vision? etc. You also might consider applications for non-standard contexts or environments.
  2. A possible inspiration could come for this year’s CHI conference Student Design Competition. Here is an excerpt from 2016’s competition.

“The theme of CHI 2016 is ‘doing good.’ We want you to operationalize this theme by creating an Assistive Technology. You could adopt an inclusive design strategy that allows someone with a sensory impairment to more effectively use an existing technology. You could just as validly creat an all-new technology that offers opportunities for the disabled to participate in a domestic or public setting, for work or for play. You may want to be very specific (e.g., a non-vocal individual participating on a debate team or at a poetry slam) or more general (e.g., a blind person navigating an unfamiliar part of town (after having been dropped off by their self-driving car service)). You can apply what we know about social networks, gamification, the internet of things, wearables, or hacker spaces. You may investigate why specific groups of individuals face more challenges and then experiment with ways to overcome those challenges. You may address specific challenges in an occupational setting, or with mobility, or in learning, or with living independently, or in entertainment
Choose you own or do something that crosscuts all of those. You may come up with an inclusive design approach that makes existing technologies work for a broader set of users or you may find opportunity in emerging technologies (e.g., 3D printing, nanotechnology, modular robotics, drones, wearables, programmable matter, or whatever). Push the envelope expand the discussion and the possibilities empower people!”
Another way to find an idea is to look through the special topics in the rest of the course, see if any particular topics strike your interest, and try to develop an idea within the theme of the special topic.

  1. Most likely, your system will have both a significant, interesting user interface part and a significant, interesting computational infrastructure behind the interface. On the one hand, an application that focuses solely on interface components would likely not do anything interesting; on the other hand, an application that is primarily “computational” (e.g., neural-network training) with the most basic interface features would not be appropriate for this course. Thus, you should aim for a project in which you could imagine approximately half of the code being devoted to the interface and half devoted to doing something interesting based on the user’s interaction with the system.
  2. The application can be implemented in Java/Swing, HTML/CSS/Javascript, and can be designed for a desktop, web, mobile or any other type of platform. However, keep in mind, we will mainly be covering Java and web UI technologies during the course. All code developed for the project must be new code – that is, you cannot build on or extend a system that you may have developed in another context. However, it is acceptable to import complex packages (e.g., a speech recognizer) to be utilized by your project code, as long as such packages are noted in your final paper..

Once you make a final decision, you can focus on this project by following these steps below. This will help you organize your work agenda. Please be realistic with how much you can implement in the course of the term. You have only 2-3 weeks to actually implement the system; a great deal of time will be needed for doing background research, testing of the interface, and final writing – please keep this in mind

Part 1: Project Description and User Analysis

In this stage, you will describe your idea and preliminary analysis. This will include a problem description, user analysis and system description. Please note that you will revise this description as the project progresses. But this first description will allow you to think creatively about the problem you’d like to solve and how you intend to approach this from the users’ point of view. It will also give the professor and your classmates a clear summary of the goals of your project.

Part 2: Full Design Specification

In this part, you will complete the design specification for your project idea. Refer to the lecture notes on Design Specification to complete this.
Conceptual Model: This consists of a description of the conceptual model in terms of objects, relations between objects, actions on objects, and attributes of objects. The conceptual design identifies the set of objects and actions the user needs to know about in order to use the system. The complete model should list all Objects, Object Attributes, Object Relationships, Actions on Objects, Actions on Object Attributes, Actions on Object Relationships that the user is expected to know about. See the lecture notes for more details.
Semantic Level Design: describes each function including its parameters, feedback, and potential error conditions.
Syntactic Level Design: describes the syntax of the system, using one or more state diagrams. (If your syntactic level specifications become too lengthy and repetitive, you can select a subset of your interface and specify just that.) You can also use sub-diagrams (like diagram subroutines) to keep the state diagrams from becoming cluttered. NOTE: It is recommended that you do this with pencil and paper and then scan it to be included in your online submission. If you do not have access to a scanner, you could instead take a photo of your sketches, and include the photos with your submission. If neither of these options work, please get in touch with the professor.
Lexical Level Design: gives the definitions of the tokens. (Again, if your lexical level specifications become too lengthy and repetitive, you can select a subset of your interface and specify just that.)

Part 3: Interface Prototype

The first step in planning your prototype is determining what single question do you want to answer with your prototype? Then, think about what elements in the design are relevant to that question. Remove or fake everything else in your prototype as you want to get feedback that will help you the most in your design.

Part 4: Paper Draft

In this stage you will do the necessary background research for your project, and begin the writing of the paper.
The suggested structure of the paper is as follows (and as hinted at in the paper format template):
Abstract: short summary of your work

  • Introduction: brief introduction of the context of the work. Describe the motivation and the problem/question addressed by your project (i.e why are you doing it). Include the contents of Part 1 of project.
  • Background: description of related work and how your work extends/generalizes previous work
  • System (or probably a more descriptive title): description of your particular work/system, including work done in Part 2.
  • Evaluation (or perhaps a more description title): description of how you tested/evaluated the system with users
  • Discussion: final points/issues about the work
  • References: list of references/citations noted in the paper

Part 5: Presentation & Project Demo

The main portion of this final stage involves the completion of your proposed system, a presentation and live demo. You should keep in mind that because you’ll demo the system to the class, you should focus on completing the system to the point where you can effectively run an interesting and fun demo. Project demos will be held during the last week of classes.
For the presentation, all students will present their projects in the “mini-conference” with a set of presentations and demos in class or online. In class, we will run the demos in shifts. In each shift, a group of approximately 5 students will do a brief slide presentation and then demo their running system.