# HCI DP6 Report

## Final Interface
### Video
- https://youtu.be/oCzbkAbwyuc
### Representative screenshots
- **Step-by-step guide** (the button labeled ‘Guide’)
- **Resizing**
- size up 

- size down 

- **Display additional information** 

### Quality arguments
- **Step-by-step guide**
- This functionality is what provides instant assistance to the user if he/she is *extremely* unfamiliar with the kiosk interface or can't figure out how to proceed to the next step for some reason. The font size for its label has deliberately been chosen to be relatively large in order to make the button more salient in the interface, so that the user has no difficulty in locating it. Moreover, the initial message from the guide (i.e. the message that appears right after the user clicks on the button) simply notifies the user that this guide is automatic and that he/she doesn't need to touch the screen to go the next step. This message has been included to ensure that no confusion arises while using the guide (the user tests revealed that omitting this message definitely causes confusion).
- 

- The large (yellow) pointers make it clear to the user which interface element is associated which step.
- **Resizing**
- Some elders have extremely poor eyesight. Therefore, rather than kiosks that need to be recognized and ordered with the eyes, they prefer clerks they can ask what kind of menus they have and order according to their answers. However, since our kiosk UI can adjust the size of the UI elements through scrollbar or magnifying glass buttons, elders with low vision can easily place orders with kiosk. In addition, the average user is also given the freedom to adjust the size to which they can place their most efficient orders.
- **Displaying additional information**
- Elders are not familiar with the meaning of the names attached to food these days. (ex: 'T-Rex' of 'T-Rex burger') Therefore, they avoid kiosks which have no meaning explanation for the names and prefer clerks they can ask question directly. However, our kiosk UI provides simple and intuitive information enough to understand the meaning of the name, helping elders to easily use the kiosk. (ex: <img src = https://i.imgur.com/nnAkfwO.png width="50%">
) In fact, both participants of the usability test, who had only one experience in using kiosks, said that additional information helped them understand what the menu is.

## Iteration
- **Things done in iteration:**
- **Fix guide bug**
- **Reason**: The finger point to the middle of UI instead of the middle of the button in payment step
- **Change:** We fix this issue to make it shows result appropriately.
- Make the guide more understandable and less confusing.
- **Reason:** Initially guide still in menu selection page in payment step guide. And the menus in guide mixed with the menus in actual selection. This might cause confusion.
- **Change:** Make route automatically in guide to payment page and seperate data storage for actual menu selection and in guide.
- Format color usage in UI to be more proper
- **Reason:** The confirm button in payment page and correct icon in payment page isn't so visible when view from faraway.
- **Change:** Change color to be more contrast.
- **Things that we learn:**
- Percentage top and left in div format changes with the nearest parent with relative position
- Some color color usage problem isn't so visible out of actual usage with actual size(kiosk) and light interuption.

## Individual reflection
#### 20170406 Eunsu Oh's mini-reports
- which part of the UI did you directly contribute to?
- I mainly contribute to the additional information functionality.
- What worked well and not in your team? How did you overcome any hurdle in teamwork? What lesson about teamwork did you learn that you might apply to your next team project?
- The division of the project parts worked well. But I found it rather difficult to narrow our differences of ideas. Maybe because I had a hard time explaining and persuading my opinion in English. So I tried to agree with my teammates if possible and appeal my opinion using a translator if necessary to overcome these difficulties. As I teamed up with foreigners and communicated in English, I realized again that there was nothing more important than communication in teamwork. So I thought I should improve my English conversation skills in preparation for this situation again next time.
- Through the team-based design project experience, what did you learn about the user-centered design process and web-based GUI implementation?
- About the user-centered design process, I was able to realize that there are a wide variety of users in the world and that it is important to know that designers are not users because there are users with different characteristics than those who make this design. I also realized that users were so diverse that the positive in some respects could become negative in others, resulting in users' needs. About the web-based GUI implementation, I found that the useful functions used on various websites seemed simple in the past, but when I made them myself, they were never simple and had a lot to consider.

#### 20190162 Jaewoo Kim's mini-report
- Which part of the UI did you directly contribute to?
- I implemented the upper main ui and resizing feature.
- What worked well and not in your team? How did you overcome any hurdle in teamwork? What lesson about teamwork did you learn that you might apply to your next team project?
- Most of the things went well in our team. One thing hard was communicating in english, since not every one of us had english as their first language, so we mostly used text messages for communicating. The lesson I got was that people can come up with lots of good ideas if they think together in limited time.
- Through the team-based design project experience, what did you learn about the user-centered design process and web-based GUI implementation?
- I learned that thinking from user's perspective is hard yet really important. The team should remove all the thughts on their own and take all information and difficulties from users. When finding problem to solve, when deciding some design decisions, when asking if the solution is good, the team should always go ahead and ask the user; whether it be a interview, user test, or something else.
- For the web-based GUI, I learned that little considerations for the user can add up to ui with great user experience.

**20180849 Emil Gasimov's mini-report**

- What part of the UI implementation did you contribute to? Be concrete and honest, please.
- My only contribution in this regard was the implementation of the guide button.

- What worked well and not in your team? How did you overcome any hurdle in teamwork? What lesson about teamwork did you learn that you might apply to your next team project?
- We created a Kakaotalk group chat from the very beginning of the design project, so communication wasn't much of a problem. Almost all of our decisions throughout the project were produced by the group discussion; so, each team member made some contribution. The actual implementation phase was slightly troublesome, due to the individual contributions made by each member; sometimes it was necessary to make changes to your own code in order to be able to pull (from GitHub) all the recently made changes.

- Through the team-based design project experience, what did you learn about the user-centered design process and web-based GUI implementation?
- First of all, I learned that what the designer (developer) thinks the user needs does not always coincide with what the user actually needs. Therefore it is indispensable to conduct user tests (interviews) to detect any such discrepancies and then rectify the relevant parts of the software/program (being built) according to the users' impressions/comments from the interviews. A great advantage of the user-centered design process is that one can ensure that the resulting software will actually be useful/usable in real life.

**20180815 Akkanit Pornpattanadul's mini-report**
- What part of the UI implementation did you contribute to? Be concrete and honest, please.
- I made UI related to actual payment and selection. For example, payment button, add button, reduce button, remove button, payment page, success page. This also including all route process between page and the usage of database related element by redux for actual selection and in guide for example, showing number of menu selected.
- I fixed most of error that happen in UI, for example, finger positioning, number disappear, optimize resizing in showing total payment and payment button
- What worked well and not in your team? How did you overcome any hurdle in teamwork? What lesson about teamwork did you learn that you might apply to your next team project?
- Work well: We divided work quite good for basic functions
- Problem: There is some problems for further development since members tend to be at limit of their ideas and time.
- Overcome: By learning people limit and contradiction in ideas and try to negotiate between those ideas.
- What I learn: Communicate fast is better since we can know the time they have for the project and whether they gonna do it or not.
- Through the team-based design project experience, what did you learn about the user-centered design process and web-based GUI implementation?
- Some of the problem have to be tested with actual usage with the most reallistic set up for it to be seen. For example, kiosk with actual size tend to have worse graphic quality compared to the computer screen and more light interuption for larger size. This makes color usage problem arised.
- We needed more emphathy to understand users better. Because most of problems, outsider can't feel user group's problem without good communication, heart to heart.