问题概述
用户想找出发生在某段时间内的感兴趣的活动。活动以一种直观简洁的方式呈现给用户,并且包含日期和时间摘要[1]。
示例
用途
- 用于允许用户在位于某段时间内的活动之间导航时[2];
- 如果网站中不是所有内容都在给定的时间段或时间戳内,不要使用本模式[3]。
解决方案
把内容划分到有意义的时间段内。将活动分组为“今晚”、“下周”、“下个月”,或仅仅分为九月或十月。越接近今天的活动显示越多详细内容,侧重于浏览和过滤长远的活动[4]。
浏览活动日历最常用的方式是使用一组活动文本列表,或是使用月历,亦或是这二者的组合。
文本列表特别适于查看给定的时间段内的活动集合,比如某天、周、月,或仅仅是近期内。在日程满满的日历中能够了解一切,让人欲罢不能[5]。
日历(月历)适于跨日期浏览,了解活动发生的时间。孤立来看,日历几乎没有显示活动的任何信息,此外,没有活动数据的话,盒装日历几乎毫无用处[6]。如果一个月只有一两个活动,日历用处很小,仅是用来显示还有多久到下周。
将文本列表与日历相结合,日历用于在时间段内导航,文本列表显示详细内容。如果一个月只有一两个活动,那月历几乎毫无用处,此时最好仅按年显示活动列表或者使用不含时间的导航方式。
活动列表的组成元素
应用活动日历,必须提供多种类型的信息,信息类型与活动背景息息相关。如果要列出与音乐会相关的活动,则票价、剩余票数、乐队名称都是重要的信息类型;如果是会议相关的活动,则报告人、会议室名称、会议议题和报告时长都可能很重要[7]。
不考虑活动背景,以下内容对活动来讲比较重要:
- 标题;
- 发生日期;
- 开始时间;
- 发生地点;
- 组织者;
- 描述。
说明
活动日历是基于时间的项目列表,正因为基于时间才特别适合分组、过滤和排序。
讨论
时段
人不按日期来思考,而是按时段思考:今晚、这周末、下周、后面几周、下个月或是今年。 把活动分到不同的时段,对用户来说比较有意义,这是种让用户进行概览的好方式。 将活动分组为今晚、下周或下个月。
尝试对不同的时段进行不同的设计。用户可能对本周发生的活动更感兴趣,而不是下个月的;列出发生在本周的活动列表的开始时间可能比列出下个月活动的开始时间更有意义。这完全取决于用户浏览日历时所处的情况。抽时间从用户的角度考虑一下设计。
活动日历设计中的常见问题
经常出现的活动日历设计问题中最常见的有:
以Outlook和日历盒的方式思考
设计师属于工作群体,他们每天大部分时间都在从事设计工作,其中部分时间用在使用Outlook, Google日历或 iCal上面。他们使用日历安排每天的工作计划,规划后面几个月的事宜,此时盒装日历比较适用。糟糕的是,很多设计师没有意识到上述类型的日历是设计用于日常计划的(用的很好),而不是用于概览即将发生的活动——后者才是活动日历的主要设计初衷。
列出活动,但没有显示活动发生时间
我抱着不同的目的查看活动日历。一种目的是想看看后面几周或下个月是否有趣事发生。此时我并不关心活动什么时候开始,我只是看看活动发生的日期[8]。一旦我决定参加某个活动,使用活动日历的目的就发生了变化:需要查看活动详情,活动是晚上7点还是晚上8点开始?
另外可能更重要的问题是活动的标题相互类似。下面的例子中列出了一组相同的课程列表,一天有几次课。课程名称相同,但开课时间不同。由于没有显示活动开始时间,这种活动列表毫无用处。
live.cnn.com网站中的活动列表设计的很优秀,不仅列出了活动发生时间,还易于浏览。
缺少其它相关数据
如果我想去听场音乐会,音乐会所在的场地直接影响着我去还是不去。我想知道那场地是小巧怡人,还是宽敞醒目,或是是音乐毫无欣赏价值[9]。
花点时间考虑一下是什么让你正在设计的活动显得很特殊。排列信息的重要程度,让用户能浏览活动并决定活动是否有吸引力。
无法浏览
不要让我思考。基于活动类型相关的重要数据,让我很容易浏览活动信息。如果某个活动相对更重大或者更重要,将其突出显示以便告知用户,将我可能了解的活动也做同样处理,或者更甚者,将我决定参加的活动也做同样处理[10]。
另外一种突出显示活动的重要方式是社会衡量标准,例如评分、出席人数等。显示活动评分(例如几星)可以轻易找出列表中得分最高的活动。同理,活动出席人多,出席人数就多,也就在列表中更容易被发现。也可以试试用不同的字体大小、文本颜色、背景颜色(灰色阴影?)来突出显示特别的活动。
列表超长
列表内容一直增加,又没有进行可视化排序或分组,这样的活动日历没什么用处。如果列表内容太多,需要多次折叠来显示,可以考虑基于时间限制(时段)或其它数据来划分列表内容,例如分类、地点、类型或评分等[11]。
没有过滤选项
让我能够只看到我感兴趣的活动。如果我喜欢疯克音乐,那就让我只看到疯克音乐会的活动;如果我想看看哪个乐队在我喜欢的本地俱乐部内演出,那就让我能查看地点;如果我只有下周有空,那就让我只看下周的活动。
采用用户的观点,而不是你的观点
出于管理的目的,你可能会将活动分为多种类型,并在日常工作中将类型授予不同的优先级。例如,你可能会将赞助活动优先于用户提交的活动,在你的脑海里,这两者的差别很大。
但在用户看来差别不一定那么突出。如果用户想知道下周有什么疯克音乐会演出活动,他或她不关心音乐会是否是赞助的。从用户的角度看,将活动分为两类没什么意义,因此还是要将所有活动列在一起。
原文地址:http://ui-patterns.com/patterns/EventCalendar
[1]原文: Events need to be presented to users in a visually concise model that abstracts date and time.
[2]原文:Use when you want to allow your users to navigate between items that are based in a certain period of time.
[3]原文:Do not use if the content of your website does not each have its root in a given period of time or time-stamp.
[4]原文: Show more details for an event as it nears today and focus on scannability and filtering the further away it is
[5]原文: With a packed calendar, it can however be overwhelming to get and overview of everything.
[6]原文:In isolation it however reveals close to no information about the events in the calendar. Furthermore, the boxed calendar renders almost useless without data.
[7]原文:For a conference calendar, the presenter, room name, conference track name, and duration of the talk might be important.
[8]原文:In this context, I am not interested in when the event starts, but merely what date it is.
[9]原文: I want to know if it’s going to be cramped and intimate, big and bold, or if it’s that place with the crappy sound.
[10]原文:If one event is bigger or more important than another, then let the user know by highlighting it. The same goes for events that I might already have checked out or even better – have decided to attend.
[11]原文:If a list is too big to show in a few folds, consider how you can divide it up based on either time constraints (buckets of time) or other data like category, venue, genre, or rating.