# Meaningful Micro-Interaction in HCI - Johny Vino 大會筆記

{%hackmd D_yXRZ3kQuiR5RjV0P_kPg %}

> 請等待大會開始

###### tags: `#FEDC2018`
> 英文筆記
>

## Micro- Interaction

1. My background
2. Basics of Interaction
3. how to do Micro-Interaction
4. When to use Micro-Interaction
5. My behind scene process
6. Tools

## My Background

born and grew in India, Agapaikulam (south part of india)
I did electronics engineering in undergraduate
When I started to do design, I have a challenge for myself is that I don't have any design background, so I decided to do 1 design a day to improve my design.

Here is my portfolio and you can take a look at it later.
https://www.behance.net/johnyvino

## Basics of Interaction
No:
* Interaction ≄ Animation
* Interaction ≄ Meaningless transition

Yes:
* Interaction = Solve Problem
* Interaction = Help User
* Interaction = Give feedbacks to the users.

The definition I give to the interaction is that...

How Machine Interacts(Talks) with Human of what is going on in the machine.

## What is Micro-Interaction

Example: The girl is showcasing her card to the door; the door is responding her with a blur light which is micro interaction.

## How compaines Using

Example: Facebook, Twitter

## When to use Micro-Interaction
Example: Progress
Make the screen dynamic and more interesting
So the screen can talk with you.
Show that the screen is responding to the user's requests

Example: Educate
Show and educate the users how the app can be used.

Cute
You can make small animatioon to make the app more fun and make the users more engaged to the app.

Talk

Humour
Sometime we makes the app fun and make the users smile.

## My Progress

Example: my food app

The interactions I made are from the real world.

For example, one of the interaction is inspired from my kindergarten school. Everyone can understand

## Tools
- sketch
- PrincipleForMac.com (which I mainly use as I make the interactions very quickly)
- Adobe XD CC
- invision

## Q&A Session
Q: What is the purpose of your design?
A: It depends on the users that you are designing for.

Q: How would you suggestive we can keep productive and creative in our design.
A: It takes time for me. If you want to motivate yourself. you have to set your time. Set a specific time and focus on that one thing at that time.

Q:
A:

Q: If you show a fancy animation to engineers. They will challenge us about whether to make animation.
A: It is very common in the company LOL. It depends on the team you work with. You have to show the feature are really selling to the users. You have to show them why the animation can make for the company.

Q:Do you do survey before you do the design?

A:It depends on the time given by the company

Q: Do you always make the prototype for the developers?
A: I think it is related to how you communicate with the developers. I will say that I go by versions. Most of time, I will use small prototypes to talk with developers...For the first versions of the bigger projects, I will focus on the functionalities more.

Q: Do you use design guideline?
A: Depends on the size of the company. Some companies offer it while others may require to start from scratch.

Q: How important is for the designers to use javascript(Framer.js,origami)?
A:These tools are helpful for me to communicate with developers but at the same time they may limit my creativity.

Q: How do you design? How do you find out what users need and want?
A: People have different strategies. Mine is quick simple. I usually make quick prototypes and show them on mobile to people. I ask them what they like or find in the prototypes....

>中文口譯

### 微互動為主軸

## 我的背景

印度南部小鎮出生

念電子轉設計

互動設計師

要怎麼開始做設計呢？
一天一設計，做了兩年之久，做了500 多個互動式設計，也累積了不少人(Dribbble)

有些作品還是很實驗性的

目前住在紐約市

## 什麼是互動
- 互動不等於動畫
- 互動不代表無意義的轉換畫面
- 互動是來解決問題
- 互動能幫助人，給使用者回饋

互動就是機器如何與人溝通與互動
舉例：
車站(初站的互動)
刷卡付款
Uber

## 什麼是微互動
舉例：
刷卡>藍燈亮>進入房間
medium 拍掌互動
twitter
facebook 的按讚

## 什麼時候會使用微互動？

有多少人在公司工作

在上班的時候要怎麼做一些微互動呢？

1. Progress
目前進行專案的程度/流程
2. Wait
填寫表單的時候，需要使用者等待時
3. Eduate
給老人/小孩知道下一步該做什麼
4. Real World
量身高
5. Cute
像經融的app 比較嚴肅
6. Talk
7. Humour
讓使用者會心一笑

## 自己發想的流程

**收藏**
從幼稚園得到的靈感
從真實世界獲得啟發靈感

**現實世界的刷卡動作**
將這個經驗轉換成視覺化的呈現

## Tools

UI Design Sketch
動畫 Principle

## QA
會眾提問

我看到你很多作品的展現，有很多圓盤狀的操作bar但市面上看到的大部分還是 方形至底的 bar有很多旋轉的效果，目的是？

A：實驗性的做法，假設你設計的app，使用者年齡比較年長的話，要依使用者狀況而定

如何保持持續的創作 ?

A:每天有本業要做，現在在讀研究所，晚上10:00~12:00 來做UI 設計，靈感來源：我不從網路上找靈感，在腦中有很多概念，都會想試試看，做出來的東西或許有些

有個問題沒聽到...

Scarlett
如果給開發工程師看到這麼炫的動畫，他們會問說這對使用者帶來什麼好處嗎？要怎麼說服他們

A：
公司裡面工程師也很好奇，他們喜歡手機互動，你可以選擇讓你發揮特長的團隊
賣點

做設計之前會做問卷調查或訪談嗎？
A：這依照我被給予設計的時間，時間緊迫的話就無法做到這樣
如果我有三個月做這個專案的話，我就會花時間去做

Q:我是ios開發者，如何與工程師溝通開發動畫的時間...功能延遲

A:如果要用微動畫的話，小動畫
最重要的是讓他們知道這麼app 動畫的目的

關於公司的 Guideline，
A: 看公司大小規模

Q:最近有很多工具，Framer......JavaScript

A:
如果是跟工程師一起做的話，這會是很好協同的工具。
如果時間很急
我大部分作品都是比較實驗性質...

Q:跟Guideline有關的，微互動的guidleine有訂定出來嗎？
A:

Q:客戶及使用者的反饋
A：跟自己目前工作內容很相關，可以做很多策略、預先思考，我會在手機上做好原型設計，丟給客戶試試看，讓他們嘗試看看