ARAY: 使用者經驗與介面 UX/UI

--- tags: edu, aray --- # ARAY: 使用者經驗與介面 UX/UI ## To Do :::info - [ ] Logo https://g0v.hackmd.io/@jothon/ByA8devju - [ ] More Page Design ([Github Issue](https://github.com/g0v/aray/issues/19)) ::: - The page we need: - 首頁 Frontpage - [首頁內容初步構想](https://g0v.hackmd.io/HxdSKTAwQnu4FhOlxBzm9w?view#%E9%A6%96%E9%A0%81) - 找專案 Project page - [調整想法](https://g0v.hackmd.io/HxdSKTAwQnu4FhOlxBzm9w?view#%E5%B0%88%E6%A1%88%E5%88%97%E8%A1%A8) - 找幫手 Contributor page - 我的頁面 User Profile - 我的專案 My Favourite Project - 創建新專案的過程頁面 - [調整想法](https://g0v.hackmd.io/HxdSKTAwQnu4FhOlxBzm9w?view#%E5%9D%91%E4%B8%BB%E5%BB%BA%E7%AB%8B%E5%B0%88%E6%A1%88) - 也有包含標籤大小寫是否統一為小寫 - 發起專案任務的過程頁面 - 目前任務的狀態有兩個選項，"使用中"跟"未使用"，會不確定兩個詞的意思 - 行事曆 - 是否有發起活動的功能？ - 註冊 Sign Up - 登入 Log In - More funtion: - 網頁頂端列表 top bar - 網頁置底列表 footer bar - 左側瀏覽列 left bar - More need to add: - 關於 About (Intro of ARAY and contribution) ## Mockup by Tofus https://g0v.hackmd.io/@B9Iwh2UoQuuqL3vJQFC5lw/r1YWJivRO ## Colors of Sch001 ### 2020 ver. https://drive.google.com/drive/folders/1zDw_nakNmaU7Pn4F0m8LwtHbTbBIc4jM?usp=sharing :::spoiler #FC761B #0074B1 #FCD0D3 #3151C2 #ED332A ::: ### 2021 ver. https://drive.google.com/file/d/1A6ur-i_GI42N2WVbigJinDlsr4JRVzle/view?usp=sharing :::spoiler #16368C #051849 #4D40E2 #3063F7 #8DE2FC #00CEF2 #15ABFF #9E97F8 #0DFCE4 #FF00E2 #FF97F3 #FFF182 #FCF0BA ::: ## Design System from Susa（CC-BY 2.0） For further information, please check out [Design System from Susa](https://g0v.hackmd.io/NY7j6pwzR3C64yY1JY--9A) ### Colors of Susa (Palette name: Iquitos) :::spoiler 舞台紅 Red Stage: #D75704 佳發橘 Jaffa: #F08B33 太妃波奇黃 Hokey Pokey: #D1A827 燈心絨綠 Corduroy: #687672 牛津藍 Oxford Blue: #3C455C 珍娜白 Janna: #F4E7D7 #### Style guide - 為符合社群包容且多元的印象，引用這套設計系統時，盡量以==多彩==為主，大約使用==2個以上的顏色== In order to conform to the original intention of inclusiveness and diversity, when citing this design system, try to make the design ==colorful==, and using about ==2 or more colors== in your design. - 將色盤中的顏色與黑白色進行搭配是可接受的，但是==盡量不要搭配易使顏色更加混濁的灰色== It is acceptable to match the colors in the color wheel with black and white, but ==Try not to match gray that tends to make the color more turbid== - 在進行功能重要的設計時，請考慮到顏色辨識障礙使用者的使用情境，==避免將易使他們混淆的顏色放置在一起==（比如紅和綠） When designing with important functions, please consider the use situation of users with color-recognition disabilities, ==avoid putting colors that confuse them together== (such as red and green) Source (Unorganized): https://www.figma.com/file/5tGRjsvNblhMuj98omLlVf/Susa?node-id=0%3A1 ![](https://s3-ap-northeast-1.amazonaws.com/g0v-hackmd-images/uploads/upload_da102444da59e4cbeb7bcf38f794fe58.png) #### Scenes to be used ![](https://s3-ap-northeast-1.amazonaws.com/g0v-hackmd-images/uploads/upload_1cd975469e4ccc96fcb1efdd42610fc9.png) ::: ## UX Research (6/26-7/10) by Tofus :::spoiler **人物誌人群 Persona group:** - Project owners in g0v **設定核心問題 Core Question:** - g0v的坑主是怎麼向新參者介紹他們的專案的? How does the project owners in g0v introduce their projects to the new-comings? **資料 Data** - 自5月中開站以來，只有6個專案（6/700，約0.86％的專案）將他們的專案資訊進行上傳，而且僅有3個專案有完整地填上資訊 Since the site opened in mid-May, only 6 projects (6/700, about 0.86% of the projects) have uploaded their project information, and only 3 projects have complete information **論據 Warrant** - 大部分的人在填寫表單時會因為主觀認為該表單太冗長且麻煩而放棄填寫 Most people will give up filling out the form because they subjectively think the form is too long and troublesome - 一般人如果根本不知道一項服務的話，不會想去使用一項服務 Most people don’t want to use a service if they don’t know a service at all. backing: **主張 Claim** - 專案主可能是因為不知道有這個地方可以上傳所以才沒有上來使用，資料填寫不完整的人可能是因為資料填寫流程不友善所以才沒有填寫完整資訊。 The project owner may not use it because he didn't know that there is a place to upload, and the person who filled in the information incompletely may not fill in the complete information because the information filling process is not user-friendly. **初始解法 Initial solution** - 或許我們可以先改善上傳專案資料的使用者體驗，至少可以讓知道這個平台的人願意使用這個平台填寫完整資訊 Maybe we can improve the user experience of uploading project data first, so that at least people who know this platform are willing to use this platform to fill in the complete information - 或許我們可以在Slack裡面貼上使用方法以及相關文案來讓他們知道並使用這項服務，就跟一開始疫情期間的“三個關鍵字”的 Google Form 一樣 Maybe we can post the usage method and relevant copy in Slack to let them know and use this service, just like the Google Form of the "three keywords" during the beginning of the epidemic. **反駁點 Rebuttal** - 可能只是因為這個網站還是Beta版，大家都不想使用 - 可能是因為他們不想再額外添加新成員 - 可能是因為時間關係（剛開站沒多久） **採取措施 Next steps** - 先去了解“坑主”到底是個什麼樣的人 Understand what kind of person the "project owner" is - 進行量化以及質化分析 Perform quantitative and qualitative analysis - 製作Persona (或JTBD) Make Persona (or JTBD) - 之後先進行宣傳以及流程的補救作業，體驗優化的部分可以再等等 Promote and remedial the process first, and the experience optimization part can wait **To-do：** - [ ] 設計並向坑主發放問卷，進行稻草數據收集 Design and distribute questionnaires to project owners to collect straw data - [ ] 對坑主進行質性調查 Conduct a qualitative investigation of the project owner - [ ] 拆解資料，重組“坑主”形象 Disassemble the data and reorganize the image of the "project owner" ### 稻草數據問卷調查 Straw data questionnaire Link of the form (editable): https://docs.google.com/forms/d/1dzqM0T6d5vvy4P3Hoj9W49NLlVpTsn9ryOKaiHjwaI0/edit?usp=sharing ### 質性調查 Qualitative investigation Link of Discussion：https://www.figma.com/file/Yqy3BgXmrs2izHcNJTqHOO/0623-%E8%A8%AA%E8%AB%87%E8%A8%88%E7%95%AB?node-id=0%3A1 :::