Contents


Course Details

Course Code COMP4511
Course Title User Interface Design and Construction
Lecturer in Charge

A/Prof Nadine Marcus

nadine@unsw.edu.au

Admin Maliha Mian
m.mian@unsw.edu.au
Classes

The lectures (Tuesday 4-6pm, and Wednesday 11am-1pm) are common for undergraduates and postgraduates. Lectures on Tuesday will focus on UX issues, and Wednesdays will be reserved for learning React Native.

Each student should be enrolled in one of the designated 2-hour tutorial/laboratory time slots

  • Tutorial/laboratory will start in Week 2 and go through until Week 10.
  • Tutorial/laboratory project checkpoints and deliverables will take place during your scheduled lab time. You are thus expected to attend your weekly tutorials/labs to receive your grading (which begin in Week 2). Most tutorials are Face-to-Face (F2F) in CHIL in K17, but some will be online. Please ensure you attended your enrolled tutorial/laboratory.
Consultations TBA
Units of Credit 6
Course Website

Moodle
Handbook Entry http://www.handbook.unsw.edu.au/undergraduate/courses/current/COMP4511.html

**Please note that the main website for this course is Moodle **


Course Summary

COMP4511 is a hands-on project-based course designed to build and solidify the basic skills you acquired in COMP3511/9511. Students will be required to build their interface at least three times (remember the process is iterative!), once as a low fidelity prototype, moving to a higher fidelity electronic prototype and finishing with a beta version of the app. This semester, we will be using React to help us write the app. The course will provide you with a basic understanding and the building blocks required to create your app, and let you guide the design and development process.

The process doesn't start with coding, it starts with an understanding your users. You develop personas of your target audience and work through the design issues: What information are they going to be dealing with? What are the workflows? How are they going to interact with the application? What is the application going to look like?

As you learned in Human Computer Interaction, you have to conceptualise your design on paper and evaluate prototypes with users. Then you start on the design of your system, not focussing on just the code but also the object-oriented design. You will build the code implementation iterating through both your object-oriented design and your user interface design.

The real insights come when we usability test your application. Do your users really understand how to use your application? Does it work the way that they expect - not what you as a programmer expect. That's the challenge. What is the difference between a bug and a design flaw? Proper evaluation techniques will help you uncover both.

We teach a process that is relevant to industry. Preparing students for the real-world challenges of user interface design. And face it, user interfaces are everywhere.

The process is not just about putting buttons and text on screen. COMP3511 only touched the surface of what user interface design is all about. Are you up for the challenge of designing graphical user interfaces?

COMP3511 Human Computer Interaction is a pre-requisite and you need a mark of 70 or better (you are expected to start design, prototyping and designing usability tests in the first week). You should have completed COMP2911/COMP9021 which introduces you to object oriented techniques, UML and design patterns, with a mark of 65 or higher.

  • This is a project-based course; the project will run for the duration of the semester and will make up a big proportion of your final course mark. Checkpoints throughout the semester will ensure that you are meeting the deadlines and proceeding adequately through the project lifecycle.
  • Lecture topics are summarised in the Course Schedule below.
  • The course includes topics relating to Requirements, Design, Prototyping and Evaluation within the User Centred Design process.
  • It is assumed knowledge that you are already able to conduct basic usability evaluations (based on the skills acquired in COMP3511/9511)
  • This course will take you through a basic cycle of Paper Prototype, Electronic Prototype and Beta version of an app


Assumed Knowledge

It is assumed knowledge for this course that you are already familiar with the basic concepts of user centred design cycle, heuristic and cognitive evaluations, paper prototyping, and usability evaluations. Additionally, you must be able to write a number of usability-based documents, including consent forms, questionnaires, usability test plans, etc. (learnt in COMP3511/9511). Students are also expected to be familiar and comfortable working with OO concepts (learnt in COMP2911/COMP9021). Because students come from a variety of backgrounds, with different knowledge bases, the assumed knowledge is not extensive. The course does, however, involve some reading that will be based on industry experience and standards.


Student Learning Outcomes

This course is designed to further develop student understanding about the theories and principles behind user interface design. The students are expected to undertake a semester long project, where they will gain familiarity with both low- and high-fidelity prototyping techniques and will also be introduced to React Native to assist with the development of a functioning prototype or an app. At the completion of the course, students should be able to:

  • Prepare a project plan that is based on user-centred design principles and then carry out activities to design, evaluate and refine user interaction based on iteration
  • Develop the skills necessary to create a user interface evaluation report (written and oral) that critiques a user interface.
  • Develop design skills, primarily using paper for rapid solutions, and consolidate individual designs to understand the importance of design decisions and the selection process.
  • Develop design skills, to construct high-fidelity prototypes based on previous paper-based design activities
  • Prepare and carry out usability walkthroughs to evaluate both paper and electronic based designs for their usability, and then create structured reports that quantify the issues discovered from evaluation activities.
  • Develop skills with React Native to implement their prototype into a functioning beta version of an app.
  • Ability to critically evaluate current research in the UX domain and apply it to projects
  • To develop an awareness of user-centred design tools, methods, and techniques and maintain a real-world perspective in order to be able to apply this knowledge in industry.

This course contributes to the development of the following graduate capabilities:

Graduate Capability Acquired in
Scholars capable of independent and collaborative enquiry, rigorous in their analysis, critique and reflection, and able to innovate by applying their knowledge and skills to the solution of novel as well as routine problems Lectures, tutorials/labs and assignments
Entrepreneurial leaders capable of initiating and embracing innovation and change, as well as engaging and enabling others to contribute to change Lectures
Professionals capable of ethical, self- directed practice and independent lifelong learning Labs and assignments
Global citizens who are culturally adept and capable of respecting diversity and acting in a socially just and responsible way Lectures


Teaching Strategies

Every week, starting in Week 1 we will have lectures on Tuesday and starting in Week 2 also on a Wednesday. We will use the Tuesday lecture to explore UX and UI methods and gain further understanding of concepts within the space. On Wednesdays, we will focus on playing with React Native and putting together some example apps. The lectures will consist of lecture material, design diary and design exercises and activities. We expect all students to engage and participate with the content, ask questions and use this time to solidify understanding of material. Please remember that you will get a lot out of this course if you engage with the content and with us and ask lots of questions.

You will need to attend your enrolled tutorial in the mode for which it is allocated. The online tutorials will be run using a link via Blackboard, and the face-to-face tutorials will be held in the CHIL (Computer Human Interaction Laboratory) G13-K17, ground floor Mac lab. If you are feeling unwell or showing any symptoms and need stay at home: https://edtech.eng.unsw.edu.au/c19mess/comms.html . Please ensure you make contact with your tutor to make alternate tutorial attendance arrangements if you have selected face-to-face classes.

Some of the tutorial time will be dedicated to project work under the guidance of your tutor, with the rest of the time spent on React Native and usability exercises. The project will be extensive and will require your attention and hard work to get through. In Week 3 we include a small React Native deliverable to get you more familiar with the tool early on. In Week 4, 5, 7 and Week 10, you will have checkpoints for your project work, to make sure that you are on track to meet project deadlines and to continue with projected timelines. Late penalties will be applied if you have not adequately prepared for these checkpoints. This is also a great time to ask any question relating to the project or otherwise and receive feedback on your work.

Design Diaries will be an important assessable component of this course. You are welcome to either keep a digital design diary using OneNote on the Teams app, OR use a physical design diary and scan your pages in to upload to OneNote, OR convert content to a PDF using another tool. Design Diaries will be submitted in week 5 and week 10, as a PDF for consistency purposes. Your design diary will be used to assess and comment on your project progress and milestones. It will also include weekly lecture activities. You are encouraged to use your design diary creatively – feel free to doodle, write down ideas, sketch down ideas and use the design diary as you see fit – think of it as a graphical and textual timeline of your project development. Use it like a coding sandbox – to try new things and experiment with different ideas! Feel free to use the pen and paper method, and upload images to the digital diary space.

We will be moving through the lifecycle at a rapid pace and it is therefore important that you can keep up with all the deliverables and associated readings.


Teaching Rationale

  • This course has a heavy practical component in the form of a semester-long project and introduces you to the programming aspects of user interface software.
  • Whilst we do not assume that you have developed apps before, we do require that you be competent in object-oriented principles and programming techniques. We will be using React Native as our programming language.
  • Usability evaluation is a key component of the user-centered design lifecycle, so your peers in the class will be providing you with feedback to improve your designs.
  • We build on the user centred design principles introduced in COMP3511/9511 expecting that you will conduct user interviews to better understand requirements, develop paper and electronic prototypes of your design and conduct usability walkthroughs of your designs BEFORE you write code
  • Your project is to develop an interactive application in the domain that is of interest to you. We believe that by helping you create something that you are passionate about then your desire to excel and learn far outweighs completing a project for which you have no interest.
  • We train software aware students to be more than just programmers


Course Evaluation and Development

This course is evaluated each session using the myExperience system.

Lab-based feedback will be used to gather further feedback about the course. We take all feedback seriously and approach the design of this course using user centred design philosophies. Students are also encouraged to provide informal feedback during the session, and to let the lecturer in charge know of any problems, as soon as they arise. Suggestions will be listened to very openly, positively, constructively and thankfully, and every reasonable effort will be made to address them.

In the previous offering of this courses, some students noted that they struggled with only engaging properly with React Native too late in the course. We are thus introducing a mini React Native deliverable due in week 3, to help get you going with this sooner. We also plan to have a few React Native consultations later in the term to help support students with related issues.

There were also comments about the need to log into different sites for different things as well as the poor forum tools in WebCMS. We will thus be using Moodle as the main LMS with links to other tools and content as needed. I note that we conducted a mini user study of the pros and cons of the different LMSs and don’t believe there is a perfect solution as each system supports certain tasks better, but we are attempting to find a better solution based on previous year’s feedback.

And lastly, we will introduce a one-minute video submission of your group project ideas so that these can be viewed and shared amongst all the course teachers, so that everyone can get more feedback early in the project life cycle.


Student Conduct

The Student Code of Conduct ( Information , Policy ) sets out what the University expects from students as members of the UNSW community. As well as the learning, teaching and research environment, the University aims to provide an environment that enables students to achieve their full potential and to provide an experience consistent with the University's values and guiding principles. A condition of enrolment is that students inform themselves of the University's rules and policies affecting them, and conduct themselves accordingly.

In particular, students have the responsibility to observe standards of equity and respect in dealing with every member of the University community. This applies to all activities on UNSW premises and all external activities related to study and research. This includes behaviour in person as well as behaviour on social media, for example Facebook groups set up for the purpose of discussing UNSW courses or course work. Behaviour that is considered in breach of the Student Code Policy as discriminatory, sexually inappropriate, bullying, harassing, invading another's privacy or causing any person to fear for their personal safety is serious misconduct and can lead to severe penalties, including suspension or exclusion from UNSW.

If you have any concerns, you may raise them with your lecturer, or approach the School Ethics Officer , Grievance Officer , or one of the student representatives.

Plagiarism is defined as using the words or ideas of others and presenting them as your own. UNSW and CSE treat plagiarism as academic misconduct, which means that it carries penalties as severe as being excluded from further study at UNSW. There are several on-line sources to help you understand what plagiarism is and how it is dealt with at UNSW:

Make sure that you read and understand these. Ignorance is not accepted as an excuse for plagiarism. In particular, you are also responsible that your assignment files are not accessible by anyone but you by setting the correct permissions in your CSE directory and code repository, if using. Note also that plagiarism includes paying or asking another person to do a piece of work for you and then submitting it as your own work.

UNSW has an ongoing commitment to fostering a culture of learning informed by academic integrity. All UNSW staff and students have a responsibility to adhere to this principle of academic integrity. Plagiarism undermines academic integrity and is not tolerated at UNSW. Plagiarism at UNSW is defined as using the words or ideas of others and passing them off as your own.

If you haven't done so yet, please take the time to read the full text of

The pages below describe the policies and procedures in more detail:

You should also read the following page which describes your rights and responsibilities in the CSE context:


Special Consideration

If your work in this course is affected by unforeseen adverse circumstances, you should apply for Special Consideration through myUNSW, including documentation on how you have been affected. If your request is reasonable and your work has clearly been impacted, then

  • for an assignment, you may be granted an extension
  • for a Mini Prac Exam, you may be granted an opportunity to take the exam later
  • for the Final Exam, you may be offered a Supplementary Exam Note the use of the word "may". None of the above is guaranteed. It depends on you making a convincing case that the circumstances have clearly impacted your ability to work. If you are registered with Disability Services, please forward your documentation to Nadine Marcus within the first two weeks of trimester.


Assessment

  • Four major pieces of work make up the assessment for this course: the paper prototype and relevant documentation, the electronic prototype and all relevant documentation and the beta version and all the relevant documentation. The fourth assessment piece will be the individual reflection. There is also a minor deliverable to get you started on React Native.
  • Late penalties for project work will be applied to submissions received after the due date (as per UNSW standard policy). 5% of the total project mark will be deducted from the assigned mark per day late, capped at 5 days (120 hours), after which a student cannot submit (and so automatically fails this assessment). This will apply to the checkpoints and weekly deliverables throughout the semester.
  • All electronic work submitted will be retained by the University of New South Wales and can be used for teaching, research and review purposes. We will acknowledge your contribution if you wish, or withhold your name should you choose to remain anonymous.
  • All submissions can be checked for plagiarism.

All students will complete a semester long project, which will involve designing, implementing and evaluating a user interface. To get an industry like experience which requires collaborative work we will be doing this in groups of 3-4 students. Remember that user interface design is an iterative process, your project will involve AT LEAST three iterations – starting as a low fidelity prototype, a higher fidelity prototype and finally with a beta version of an app, using React Native. Because iterations take time, we need to get started as soon as possible on the project. There will be formal checkpoints in your tutorial/studio time (in Week 4, 5, 7 and Week 10) to assess your progress with the project and provide you with feedback. Online Moodle submission links will be available for these deliverables. The purpose of these is to make sure you remain on track to finish the project and to provide feedback through the various stages of the design and development process. The project specification will be available in Moodle and will be discussed in the early lectures.


Item Due Marks
React Native Deliverable Week 3 2%
Design Diary
Weeks 5 and 10 24%
Assignment 1 Individual Research and Presentation
Week 8 24%
Group Project
See spec for details 50%


Course Schedule

This is the intended course schedule. Subject to changes. Moodle will contain the up-to-date schedule.

Week Lectures Links Tute/Labs Assignments Other Notes
1 Logistics
Design Thinking

Tutorials begin in lieu of the week2 public holiday on Thursday.

Includes project group formation.




2 Personas and Scenarios
User Stories for Requirements
User Story Mapping
Introducing React Native (1)

Wednesday classes:

Project work (1 hour)

Group formation in class


- -
3 Introducing Atomic Design methods
Creating a Design System start
React Native Basics

React Native exercises marked in class

Project work (If time)


React Native Mini Deliverable - -
4 Prototyping with Figma/Other
Usability Testing
React Native


In-class checkpoint



Group Project Checkpoint 1 - -
5 Information Architecture in Mobile App Design
React Native


In-class checkpoint



Design Journal 1

Group Project Checkpoint 2

- -
6 Flexibility Week






7 Multi Generational Design and Inclusive Design
React Native

In-class checkpoint



Group Project Checkpoint 3
- -
8 Visual Design in App Design and Colour Theory
React Native

In-class presentations



Assignment 1 Individual Research and Presentation

- -
9 Mobile Design Principles
React Native


In-class presentations

Project work



- - -
10 Demos/Project Work

In-class checkpoint



Design Journal 2

Group Project Checkpoint 4
-


Resources for Students

Texts and recommended readings:

  • Buxton (2007), Sketching User Experiences: Getting the Design Right and the Right Design, Morgan Kaufmann.
  • Cooper et al (2007), About Face 3.0: The Essentials of Interaction Design, John Wiley
  • Goodwin (2009), Designing for the Digital Age, John Wiley
  • Johnson, J. (2013).Designing with the mind in mind: simple guide to understanding user interface design guidelines. Elsevier.
  • Lazar, Feng & Hochheiser, (2010), Research Methods in Human-Computer Interaction, John Wiley
  • Nielsen (1993), Usability Engineering, Morgan Kaufmann.
  • Norman, D.A. (1998), The Design of Everyday Things(Paperback), MIT Press, London
  • Rubin (1994 or 2008) Handbook of Usability Testing, John Wiley Publishing.
  • Snyder C (2003), Paper Prototyping, Morgan Kaufmann

Other resources (e.g. links to on-line documentation) will be provided linked from the lecture slides.

Resource created Saturday 25 June 2022, 08:42:32 PM, last modified Saturday 24 September 2022, 10:36:14 AM.


Back to top

COMP4511 22T3 (User Interface Design and Construction) is powered by WebCMS3
CRICOS Provider No. 00098G