$.when.apply_When2Meet vs.LettuceMeet:UI和美學方面的案例研究

$.when.apply

并非所有計劃應用程序都是一樣創建的。 (Not all scheduling apps are created equal.)

As any college student will tell you, we use When2Meet almost religiously. Between classes, extracurriculars, work, and simply living, When2Meet is the scheduling app that holds all our commitments in a tenuous balance. There’s a lot of reasons why we like it: it’s free, easy to use, and has no frills.

正如任何大學生都會告訴您的那樣,我們幾乎虔誠地使用When2Meet 。 在課程,課外活動,工作和簡單生活之間,When2Meet是一個調度應用程序,可以使我們的所有承諾保持微妙的平衡。 我們喜歡它的原因有很多:它是免費的,易于使用的,而且沒有多余的裝飾。

Abstract pink and green blobs surrounding a screenshot of When2Meet’s interface.
When2Meet’s home page is pared down to just the essentials.
When2Meet的主頁僅精簡為基本內容。

On that last part: When2Meet is so no frills to the point that it almost feels undesigned. It’s typeset in Arial, not Helvetica; its accent color is a blinding electric green; and anywhere from a third to a half of the home screen is its black footer. “It’s not aesthetically pleasing, that’s for sure,” my friends would say, and I’d agree. For a site that hasn’t changed much at all since its debut in 2012, When2Meet certainly won’t be winning any design awards anytime soon.

在最后一部分:When2Meet如此簡潔,以至于幾乎感覺不到設計。 它是用Arial(而不是Helvetica)排版的; 它的重點顏色是令人眼花electric亂的綠色。 黑色屏幕頁腳是主屏幕的三分之一到一半。 我的朋友會說:“這肯定在美學上并不令人滿意,”我同意。 對于自2012年首次亮相以來并沒有太大變化的網站,When2Meet當然不會很快獲得任何設計大獎。

Compared to When2Meet, LettuceMeet looks amazing (at least, at first glance). The site is typeset in Quicksand, a pleasing rounded sans serif; there’s a healthy amount of whitespace; and the tool maintains an overall clean aesthetic.

與When2Meet相比, LettuceMeet看起來很棒(至少乍一看)。 該網站使用流沙(一種令人愉悅的無襯線襯線)排版; 有大量的空白; 該工具可保持整體清潔美觀。

Abstract pink and green blobs surrounding a screenshot of LettuceMeet’s interface.
LettuceMeet’s home page has a calendar with a healthy dose of whitespace.
LettuceMeet的主頁上有一個帶有空白空格的日歷。

However, despite LettuceMeet’s aesthetically pleasing design, I’ve yet to see it used in the wild the way When2Meet is. So why has LettuceMeet not permeated the campus consciousness the way When2Meet has?

但是,盡管LettuceMeet具有美學上令人愉悅的設計,但我還沒有看到它像When2Meet那樣被廣泛使用。 那么,為什么LettuceMeet不能像When2Meet那樣滲透到校園意識中呢?

從審美角度而言, ≠良好的用戶體驗。 (Aesthetically pleasing ≠ good user experience.)

Part of the reason LettuceMeet hasn’t been used more widely is its relative infancy, having debuted just last year. More importantly, though, is the fact that underneath the sheen of tasteful typefaces and pretty placements lies a far inferior user experience.

LettuceMeet尚未得到更廣泛使用的部分原因是它的相對嬰兒期,它在去年才首次亮相。 但是,更重要的是,事實是,在雅致的字體和漂亮的位置的光澤下,用戶體驗要差得多。

The problem lies in the flow that LettuceMeet forces into to input information. Take, for example, the steps required to set up an availability calendar:

問題出在LettuceMeet強迫輸入信息的流程中。 例如,采取設置可用性日歷所需的步驟:

Creating a meeting on LettuceMeet takes 2 pages of info to set up.
Creating a meeting on LettuceMeet takes two pages of information to set up.
在LettuceMeet上創建會議需要兩頁信息。

The user must go through two whole pages before getting to the meeting link. Compare that to When2Meet’s economical page that gathers everything you need to know in one go:

在進入會議鏈接之前,用戶必須瀏覽整個兩頁。 與此相比,When2Meet的經濟型頁面可以一次性收集您需要了解的所有信息:

In contrast to LettuceMeet, creating a meeting on When2Meet only requires 1 page of info to set up.
In contrast to LettuceMeet, creating a meeting on When2Meet only requires one page of information to set up.
與LettuceMeet相比,在When2Meet上創建會議僅需要設置一頁信息。

Actually adding availability in LettuceMeet isn’t much better, requiring users to go through three more pages before seeing their availability on-screen:

實際上,在LettuceMeet中添加可用性并沒有改善多少,要求用戶再瀏覽三個頁面才能在屏幕上看到其可用性:

Adding availability on LettuceMeet requires 3 full pages of info to input.
Adding availability on LettuceMeet requires three full pages of information to input.
要在LettuceMeet上添加可用性,需要輸入三頁完整的信息。

Compare the above flow with that of When2Meet, which condenses the same task into two pages:

將以上流程與When2Meet的流程進行比較,后者將同一任務濃縮為兩頁:

Compare LettuceMeet’s bloated taskflow with that of When2Meet’s, which requires only 2 pages to add availability.
Compare LettuceMeet’s bloated taskflow with that of When2Meet’s, which requires only two pages to add availability.
將LettuceMeet的龐大任務流與When2Meet的任務流進行比較,后者僅需兩個頁面即可增加可用性。

By splitting information up into separate pages, LettuceMeet forces users through a taskflow that isn’t necessarily intuitive to how we chunk information. Why must we select what days to meet on one page and what time range on a different one? Why am I adding my availability before declaring who I am?

通過將信息分成單獨的頁面, LettuceMeet迫使用戶通過任務流程,而該任務流程對于我們如何分塊信息不一定很直觀。 為什么我們必須在一頁上選擇什么日子見面,而在另一頁上選擇什么時間范圍? 為什么在聲明我是誰之前添加我的空閑時間?

For a user who wants to schedule a group meeting quickly and efficiently, the streamlined taskflow of When2Meet just feels right, reinforcing the information I need to provide and then providing an immediate response to my need.

對于想要快速高效地安排小組會議的用戶而言,When2Meet簡化后的任務流程感覺不錯,可以增強我需要提供的信息,然后立即對我的需求做出回應。

記住UI中的U。 (Remember the U in UI.)

Let me be clear: When2Meet isn’t great design. There are many improvements one could make to the overall experience, like drawing more attention to the required info in When2Meet, or consolidating the taskflow for adding availability to one page. Moreover, LettuceMeet might get the upper hand on mobile, where its responsive design and bite-sized steps make a little more sense.

讓我清楚一點:When2Meet不是很好的設計。 人們可以對整體體驗進行許多改進,例如,將更多的注意力放在When2Meet中的必需信息上,或者合并任務流程以將可用性添加到一頁上。 此外,LettuceMeet可能會在移動設備上占上風,其響應式設計和小巧的步驟更具意義。

However, what When2Meet does better than any of its alternatives is understand the needs of its users, who prioritize efficiency over attractiveness. Despite the relatively steeper learning curve in figuring out how to use When2Meet, using it in the long-term is far less cumbersome than the multi-page design of LettuceMeet, aesthetics be damned. And on the whole, When2Meet’s core tasks are better implemented than LettuceMeet’s.

但是,When2Meet比任何其他替代產品都有更好的表現是要了解其用戶的需求 ,他們將效率置于吸引力之上。 盡管在確定如何使用When2Meet時會遇到相對較陡的學習曲線,但長期使用它比LettuceMeet的多頁設計麻煩得多,但該死的是美學。 總體而言,When2Meet的核心任務比LettuceMeet的更好。

As UX designers, it’s very easy to get lost in the pixel-precision we desire—the thing is, that’s only one part of what we do. In actuality, we are tasked to create intentional experiences, and things like typography and color are tools to design for those intentional experiences. Rarely is a fundamentally bad user experience improved by making it pretty. So what do we do?

作為UX設計師,很容易迷失我們想要的像素精度-事實是,這只是我們所做工作的一部分。 實際上, 我們的任務是創造意向性體驗,而版式和顏色之類的東西就是設計這些意向性體驗的工具。 通過使其變得漂亮,從根本上改善不好的用戶體驗。 那么我們該怎么辦?

Keep the user in mind as you design your interface, and have users test it out themselves to ensure its usability. What are their needs? What do they prioritize? And how can I design this experience intentionally to meet their needs and priorities?

在設計界面時要牢記用戶,并讓用戶自己對其進行測試以確保其可用性。 他們有什么需求? 他們優先考慮什么? 我如何才能有意識地設計這種體驗以滿足他們的需求和優先級?

In this way, we aren’t making just pretty tools; we’re creating intuitive and useful ones, too.

這樣,我們不僅可以制作漂亮的工具,還可以制作精美的工具。 我們也在創建直觀而有用的工具。

Image for post
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),這是一個巴西組織,致力于通過采取行動,賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/when2meet-vs-lettucemeet-a-case-study-in-ui-and-aesthetics-9d80402eee54

$.when.apply

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275316.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275316.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275316.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

BZOJ4825: [Hnoi2017]單旋(Splay)

題面 傳送門 題解 調了好幾個小時……指針太難寫了…… 因為只單旋最值,我們以單旋\(\min\)為例,那么\(\min\)是沒有左子樹的,而它旋到根之后,它的深度變為\(1\),它的右子樹里所有節點深度不變,其它所有節點…

前端不容你褻瀆

大家好,我是若川,點此加我微信進源碼群,一起學習源碼。同時可以進群免費看Vue專場直播,有尤雨溪分享「Vue3 生態現狀以及展望」背景最近我在公眾號的后臺收到一條留言:言語里充滿了對前端的不屑和鄙夷,但仔…

用jquery阻止事件起泡

jquery使用過程中阻止事件起泡實例 1、通過返回false來取消默認的行為并阻止事件起泡。jQuery 代碼:$("form").bind("submit", function() { return false; })2、通過使用 preventDefault() 方法只取消默認的行為。jQuery 代碼:$("form").bind(…

利益相關者軟件工程_如何向利益相關者解釋用戶體驗的重要性

利益相關者軟件工程With the ever increasing popularity of user experience (UX) design there is a growing need for good designers. However, there’s a problem for designers here as well. How can you show the importance of UX to your stakeholders and convince…

云棲大會上,阿里巴巴重磅發布前端知識圖譜!

大家好,我是若川,點此加我微信進源碼群,一起學習源碼。同時可以進群免費看Vue專場直播,有尤雨溪分享「Vue3 生態現狀以及展望」阿里巴巴前端知識圖譜,由大阿里眾多前端技術專家團歷經1年時間精心整理,從 初…

Linux下“/”和“~”的區別

在linux中,”/“代表根目錄,”~“是代表目錄。Linux存儲是以掛載的方式,相當于是樹狀的,源頭就是”/“,也就是根目錄。 而每個用戶都有”家“目錄,也就是用戶的個人目錄,比如root用戶的”家“目…

在當今移動互聯網時代_誰在提供當今最好的電子郵件體驗?

在當今移動互聯網時代Hey, a new email service from the makers of Basecamp was recently launched. The Verge calls it a “genuinely original take on messaging”, and it indeed features some refreshing ideas for the sometimes painful exercise we call inbox man…

插件式開發小記

在做插件開發時,小記一下,用來備忘: 1.DEV8.2的XtraTabControl控件如何獲得當前打開的子窗體:XtraForm frm (XtraForm)xtraTabControl1.SelectedTabPage.Controls[0];2.插件開發的底層標準最好是抽象類,這樣擴展性好。…

linux運維工程師學習路線

一、學習路線: 1.青銅: 1、Linux基礎知識、基本命令(起源、組成、常用命令如cp、ls、file、mkdir等常見操作命令) 2、Linux用戶及權限基礎 3、Linux系統進程管理進階 4、linux高效文本、文件處理命令(vim、grep、sed、…

React 全新文檔上線!

大家好,我是若川,點此加我微信進源碼群,一起學習源碼。同時可以進群免費看明天的Vue專場直播,有尤雨溪分享「Vue3 生態現狀以及展望」,還可以領取50場錄播視頻和PPT。React 官方文檔改版耗時 1 年,今天已完…

POJ2392

題意:奶牛們要用K個不同類型的石頭建太空電梯.每一種石頭的高度為Hi,數量為Ci,且不能放在高于Ai的地方,求最高能建多高的太空電梯. 分析:多重背包,數組標記.顯然將ai小的放在下面會更優.所以先排序. code: const maxh41000; var cnt:array[0..maxh] of longint;h,…

網絡低俗詞_從“低俗小說”中汲取7堂課,以創建有影響力的作品集

網絡低俗詞重點 (Top highlight)Design portfolios and blockbuster movies had become more and more generic. On the design side, I blame all the portfolio reviews and articles shared by “experienced” designers that repeat the same pieces of advice regardless…

Vue多個組件映射到同一個組件,頁面不刷新?

問題 在做項目的過程中,有這么一個場景:多個組件通過配置路由,都跳轉到同一個組件,他們之間的區別就是,傳入的參數不同.請看router對象: userCenterLike: {name: user-center,params: {index: 0}},userCenterHistory: {name: user-center,params: {index…

尤雨溪寫的100多行的“玩具 vite”,十分有助于理解 vite 原理

1. 前言大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12想學源碼,極力推薦之前我寫的《學習源碼整體架構系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

webflow如何使用_我如何使用Webflow構建輔助項目以幫助設計人員進行連接

webflow如何使用I launched Designer Slack Communities a while ago, aiming to help designers to connect with likeminded people. By sharing my website with the world, I’ve connected with so many designers. The whole experience is a first time for me, so I wa…

atmega8 例程:T1定時器 CTC模式 方波輸出

/******************************************************************* * 函數庫說明:ATMEGA8 T1定時器 CTC模式 方波輸出 * 版本: v1.00 * 修改: 龐輝 蕪湖聯大飛思卡爾工作室…

antd的table進行列篩選時,更新dataSource,為什么table顯示暫無數據?

我想當然地認為只要dataSource改變&#xff0c;那么<Table>組件就會重新渲染&#xff0c;但是有一種特殊情況例外&#xff1a;在onFilter()中不寫篩選條件&#xff0c;在調用filterDropdown進行列篩選的時候&#xff0c;通過handleSearch改變/保存dataSource的狀態&#…

重新構想原子化 CSS

感謝印記中文的 QC-L[1] 對本文進行翻譯&#xff0c;英文原文: English Version[2]。本文會比往期文章相對長些。這是我個人的一個重大的工具發布&#xff0c;有許多內容我想談論。如果你能花些時間讀完&#xff0c;不勝感激&#xff0c;希望能對你有所幫助 :)推薦訪問 https:/…

cv::mat 顏色空間_網站設計基礎:負空間

cv::mat 顏色空間Let’s start off by answering this question: What is negative space? It is the “empty” space between and around the subjects of an image. In the context of web design, your “subjects” are the pictures, videos, text, buttons and other e…

MVC3 上傳文件

前臺引擎采用Razor 上傳頁View&#xff1a; model System.Web.HttpContextBase{ ViewBag.Title "上傳文件";}<h2>上傳文件</h2><br /><br />*new { enctype "multipart/form-data" }比不可少&#xff0c;否則上傳文件不會成功…