• Summary:
    From 0.1 seconds to 10 years or more, user interface design has many different timeframes, and each has its own particular usability issues.

    The user experience field has its own version of "Powers of Ten" (the classic 1968 documentary by Ray and Charles Eames). For us, it's not so much that things get 10 times bigger or smaller; most user interfaces are about the same physical size, as dictated by the need to work with the human body. For example, a BlackBerry keyboard is about 1/5 the size of a PC keyboard — it wouldn't work at 1/10 the size. And, except for wall-sized displays, nothing is 10 times bigger than a PC interface.

    But in the "4th dimension" of time, user experience phenomena work across many powers of 10.

    0.1 Second

    Many of the effects of perceptual psychology take place at this time scale.

    A research team lead by Dr. Gitte Lindgaard found that people can make rough decisions about a Web page's visual appeal after being exposed to it for as little as 50 ms, which is 1/20 of a second (50 ms is only half of 0.1 second, but it's close enough for the purposes of a "powers of 10" analysis.)

    In Lindgaard's study, screen images were flashed at test participants for 0.05 seconds, after which they could distinguish between more and less attractive designs. It's important to realize that this is not how users actually approach Web pages during real use. For one, pages don't flash on the screen for an instant and then go away. Instead, they render over a period of a second (if we're lucky — otherwise more). Second, people spend a few seconds looking over the page before they decide what to do about it.

    Still, the study does show that people can form basic visual impressions very quickly, at the limits of human perception.

    0.1 second is the response time limit if you want users to feel like their actions are directly causing something to happen on the screen. For example, if you click on an expandable menu and see the expanded version in less than 0.1 seconds, then it feels as if you made the menu open up. If it takes longer than 0.1 seconds for the revised state to appear, then the response doesn't feel "instantaneous" — instead, it feels as if the computer is doing something to make the menu open.

    Thus, to create the illusion of direct manipulation, a user interface must be faster than 0.1 second.

    In eyetracking studies, most of the fixations we track last little more than 0.1 seconds. In fact, the first thing people notice when running their first eyetracking study is how fast the human eye moves across Web pages (or other stimuli). Users look at things very briefly, which is a big reason to emphasize clarity in content usability.

    1 Second

    When the computer takes more than 0.1 second but less than 1 second to respond to your input, it feels like the computer is causing the result to appear. Although users notice the short delay, they stay focused on their current train of thought during the one-second interval.

    This means that during 1-second response times, users retain the feeling of being in control of the interaction even though they notice that it's a 2-way interaction (between them and the computer). By contrast, with 0.1 second response times, users simply feel like they're doing something themselves.

    For Web usability, this means that new pages must display within 1 second for users to feel like they're navigating freely; any slower and they feel held back by the computer and don't click as readily.

    In the Web's early days, it was impossible to achieve such download times. This is why many guidelines advised that you minimize the number of page views required: back then, going to a new page was unpleasant if it took more than a second to do so.

    Today, with broadband widely available, subsecond download times are eminently possible and should definitely be the goal. The main problem now is not so much big graphics or heavy "page weight" (number of kilobytes to download). Now, slow response times are more frequently caused by excessive widgets and other dynamic elements that bloat the design and slow down the server.

    (Also, it's important to remember that some people still use dial-up, especially in rural areas or developing countries. Mobile devices also have slower connections, so your website's mobile version usually needs a serious diet.)

    10 Seconds

    After 1 second, users get impatient and notice that they're waiting for a slow computer to respond. The longer the wait, the more this impatience grows; after about 10 seconds, the average attention span is maxed out. At that point, the user's mind starts wandering and doesn't retain enough information in short-term memory to easily resume the interaction once the computer finally loads the next screen.

    More than 10 seconds, and you break the flow. Users will often leave the site rather than trying to regain the groove once they've started thinking about other things.

    10 seconds is also the time users typically allocate to examining a page before deciding that it's so bad that they're going to leave.

    The average page visit lasts about 30 seconds, but the more experienced the users are, the less time they allocate to each Web page. People are impatient on the Internet. Instantly gratify them, or they're out.

    1 Minute

    Users should be able to complete simple tasks in about 1 minute. Awkward sites that require much more than a minute for basic tasks — such as transferring money from a savings to a checking account — will be abandoned.

    Likewise, most Internet videos should last no more than 1–2 minutes because people don't like passively watching something for much longer than that while they're in the active frame of mind induced by Web surfing.

    Most website visits last about 2–4 minutes.

    10 Minutes

    10 minutes would be a long visit to a website. In one case, for example, we followed a user researching a B2B purchase across 25 site visits. The longest site visit? 7 minutes.

    1 Hour

    Most usability studies last from 1 to 2 hours because it's hard to recruit users to come in for longer tests. In fact, unless we're testing kids — for whom an hour is the max — we usually limit our test sessions to 90 minutes. People tire after an hour or two.

    People complete most Web tasks in less than an hour. In one study, 1/2 of e-commerce purchases occurred within 28 minutes of the user's arrival at the website. Of course, the other half were spread across longer intervals, often including multiple visits that were days apart.

    1 Day

    1 day is the maximum turnaround for customer service requests, although you should send transactional email and confirmation messages within 1 minute to keep users from wondering whether their action — such as a purchase or address change — has been received correctly.

    The difference here is that users assume that customer service requires human intervention, so they don't think the computer is broken if they don't hear back within 1 minute. Faster service is still appreciated, of course.

    Many users habitually check certain content sources on a daily basis. (A behavior called monitoring.) So, if your topic warrants, it might be smart to publish a daily e-mail newsletter. (But be warned: you're begging for unsubscribes if you have a slower-moving topic and publish too often.)

    1 Week

    Other habits are weekly (or monthly, or yearly — depending on seasons, holidays, or tax filings). In our studies of how people use social networking, we found that Facebook and Twitter tend to be daily habits (or more for some people), whereas MySpace and LinkedIn tend to be checked weekly.

    Tasks that require extensive research or big decisions often stretch across a week or more, as users gradually progress in their thinking. So, while each individual visit to any given website might last only a few minutes, the full process takes much longer.

    This means that sites must support revisitation behaviors, for example by keeping track of what users have done in previous visits.

    Weekly and monthly behaviors don't lend themselves to in-lab usability testing, so we often study them through diary studies or other more field-oriented methods.

    1 Month

    Business processes often take even more time than individual decisions because of the need to get various people on the same page. For both B2B sites and enterprise collaboration, it's common to have a month or more pass between the initial action and the completion of that workflow.

    1 Year

    Once people have used a website for about a year, they graduate to being experienced users with some knowledge about how the site works. It takes a long time to build such expertise because of the superficial in-and-out way users approach websites. Each visit is short, and people don't spend much effort on explicitly seeking out new features and building their skills.

    Nevertheless, people do eventually learn something about the sites they use frequently. This is why Amazon.com can get away with very complex product pages that are cluttered with more features than I recommend for most sites: many of Amazon's customers have used the site for years and thus have the background required to cope with the site's numerous features.

    Organizational change usually takes years. For example, it typically takes 2-3 years for a company to progress to the next level of the 8 stages of usability maturity.

    10 Years

    It takes almost 10 years for users to develop deep expertise in a complex system such as Unix. The learning curve thus continues for many years past the initial uptake of simple features that we usually study. Throughout these first 10 years, people gradually explore more and more corners of the system and slowly build their skills.

    Data often lives for decades — far longer than any individual user interface that people use to access the data. This means that you need migration tools to help users make sense of old data and transfer it into new systems. For example, photo sharing sites should give users tools to import old photos. Eventually, such sites will also need to cope with the exploding mass of thousands of decade-old uploads.

    100 Years

    If organizational change takes years, social change can take decades, getting close to the 100-year mark in some cases, which is why we're not seeing them yet for many aspects of computing. For example, it's possible that collaboration systems will depopulate cities. It's also possible that the change to shorter, more superficial information nuggets instead of immersive, linear information will undermine education as people lose the ability to learn and study harder concepts.

    We don't yet have 100-year effects in user interfaces, because people haven't yet used computers for their entire lifetime. But eventually this will happen. We're already 20 years into the era where many people started using computers as little kids. And we're certainly seeing more and more uptake of Web use and other computer activities among senior citizens.

    Combine these two trends, and we'll eventually have people who've used computers all of their lives — or 100 years for the more long-lived members of the species. What'll that mean? Let's discuss this in 80 years.

  • 【IT168 专稿】在上文中,我们简要地介绍了Windows 7所引入的新的文件管理方式:库(Library)。介绍了库的缘起,库的表现和实质。那么相信大家会接着问:如何对库进行操作呢?如何让我们自己开发设 计的应用程序支持库这一新的文件管理方式?或者是如何让我们的应用程序更好地利用这一新的文件管理特性?

      对库进行编程

      在Windows 7操作系统中,我们可以手动地对库进行管理,进行库的创建,文件夹的添加和删除等等。但是作为程序员,我们更加关心的是如何以编程的方式对库进行操作。为了帮助我们在应用程序中使用库这种新的文件管理方式,Windows 7为我们提供了一组API用于库的编程开发。

      

      图1  与库相关的API

      其中,位于最顶层的用户界面API包括我们之前提到的通用文件对话框CFD,导航栏树形控件等等。使用新的用户界面API,我们可以调用支持库的新版通用文件对话框,从而让我们的应用程序在打开或者保存文件时,可以支持库这一新的特性。 

     

    private void button1_Click(object sender, EventArgs e)

          {

              
    string strPath;

              
    // 创建新版的通用保存文件对话框

              System.Windows.Forms.SaveFileDialog _fd
    = new System.Windows.Forms.SaveFileDialog();

              
    // 设置对话框的各种属性

              fd.Title
    = "请选择文件保存的位置";

              fd.FileName
    = "[选择文件夹…-]";

              fd.Filter
    = "Library|no.files"; // 设置可选项,只能选择Library

              
    // 显示对话框

              
    if (_fd.ShowDialog() == System.Windows.Forms.DialogResult.OK)

                  {

                  
    // 获取用户选择的结果

                  
    string dir_path = System.IO.Path.GetDirectoryName(_fd.FileName);

                  
    if (dir_path != null && dir_path.Length > 0)

                      {

                      
    // 传递用户选择的路径

                      strPath
    = dir_path;

                      }

                  }

                  
    // 利用用户选择的路径进行后继处理

          }

      通过使用新版的通用文件对话框CFD,我们可以轻松的让我们的应用程序支持库这一新的文件管理方式。

       除了用户界面API,我们重点关注的是位于中间的Shell API。利用Shell API,我们可以对库进行管理,实际上就是通过Shell API修改.library-ms这个文件,当这个文件被修改后,系统会读取这个文件的信息对库进行重新组织。这组Shell API包装了多个COM对象,利用这些对象,我们可以对库进行操作,其中几个比较常用的对象是:

      •IShellLink 这个对象代表到文件、 文件夹,或可执行文件的一个链接

      •IShellFolder 对象实际上代表着一个文件夹对象,我们可以通过遍历IShellFolder对象,访问这个文件夹下的所有内容,检索文件夹中的项目的显示名称、 分析文件夹的显示名称和获取文件夹下的项目 ID 列表等等

      •IShellLibrary是Windows 7新引入的一个对象,它与一个库相对应。通过这个对象,我们可以对库进行各种操作。

      另外,Shell API也提供了多个辅助函数用于对库进行操作,比如:

      •创建库

      •打开一个已经存在的库

      •添加文件夹到库中或者删除一个库中的文件夹

      •获得一个库的文件夹列表

      •获得或者设置库的各种选项

      •获得或者设置库的图标

      通过这些Shell API,我们完全可以操作系统中的库,对其进行操作和管理。

     

    阅读全文:与Windows7共舞:对库进行编程

  • 最近Twitter很火爆,Jakob Nielsen'也为如何提供更加用户友好的Twitter而做了三番五次的重新设计:In fact, the shorter it is, the more important it is to design text for usability.

    Summary:
    We made a timeline message more punchy, credible, and viral through 5 rounds of redesign.

    A few days ago, I posted the announcement of our next usability conferences to Nielsen Norman Group's timeline on Twitter (@NNgroup).

    I don't have all the guidelines for stream-based postings yet, because we're still conducting usability studies (particularly of B2B users, like my audience). But, based on the user sessions I've observed already, I put this posting through 5 rounds of iterative design.

    1st Design

    Announcing LAS VEGAS and BERLIN as the venues for our biggest usability conference of the year http://bit.ly/UsabilityWeek

    Good: City names are highlighted, drawing the eye.

    Bad: Starts with the non-information-carrying word "announcing." Of course it's an announcement — otherwise I wouldn't be posting it...

    Remember that users tend to read only the first few characters as they scan down a list. Make them count.

    2nd Design

    LAS VEGAS and BERLIN are the venues for our biggest usability conference of the year http://bit.ly/UsabilityWeek

    Good: Frontloading attractive keywords makes this version more scannable.

    Bad: We lost the sense of news that "announcing" implied in the previous version.

    Because many companies molest their poor followers with repeat postings about the same event, users have become somewhat hardened against event promotions.

    3rd Design

    LAS VEGAS (October) and BERLIN (November) are the venues for our biggest usability conference of the year http://bit.ly/UsabilityWeek

    Good: Adding the months highlights that the conferences are coming up soon, regaining us some of that sense of news. Also, specificity is always a plus: it makes users feel like they're getting concrete and useful info, instead of the blather that characterizes so many B2B websites.

    Bad: This draft Tweet is 133 characters, leaving only 7 characters for users who want to retweet. This isn't enough to add the customary 11-character attribution (RT@NNgroup), which is a must if we're going to benefit from the viral effect of our followers' followers being made aware of our feed.

    (Keeping tweets below 130 characters won't be a long-term guideline because Twitter is redesigning to remove the source attributions from the main message content for repostings. Until this redesign goes live, however, it's best to leave slack in your original postings if you expect followers to share them.)

    4th Design

    LAS VEGAS (October) and BERLIN (November): venues for our biggest usability conference of the year http://bit.ly/UsabilityWeek

    Good: Saved 6 characters by replacing "are the" with a colon. Full sentences aren't necessary for such short content, which users are scanning anyway. We're not trying to be the next Hemingway in a tweet.

    Also: Fragments fine here. MS Word's squiggles frowning at you? Ignore them.

    (Alternatively, I could have used a shorter URL shortcut, but there are benefits to giving people an idea of where the link will lead.)

    5th Design

    LAS VEGAS (October) and BERLIN (November): venues for our biggest usability conference ever http://bit.ly/UsabilityWeek

    Good: Changed the awkward "biggest of the year" to the punchier "biggest ever." In addition to being shorter, "biggest ever" provides two additional benefits:

    • It's a more compelling argument for why readers should care and click through to see the full program
    • Growing during a bad recession is evidence of our strength and promises a positive experience, which is appealing to audiences who are tired of doom and gloom

    This year, I'm producing 33 full-day seminars in Vegas compared with 31 in 2008, so I could have tried to squeeze in a reference to "6.5% growth since last year." But even though exact numbers have higher credibility than broader assertions, a tweet should be highly focused and not try to make multiple points

    .

    Expanding by 6.5% during a recession is what evolutionary scientists call a "costly signal." That is, it's a way of communicating both the healthy status of usability in general and the high interest in our conference, which can't be faked: it costs real money to book more lecture rooms and fly in more speakers. Only a healthy peacock can grow a big tail.

    Costly signals are more credible than unsupported boasts — whether you want to attract peahens or Web users. I was particularly interested in communicating a strong position last week, because we're currently recruiting new usability staff. The best people will consider leaving their current jobs only if they're confident of the new company's prospects.

    When to Tweet

    My last design decision was when to post the message to the Twitter timeline. My preferred tweeting time is 9:01 a.m. because it encompasses working hours from California to the U.K. and thus reaches a majority of our customers. (It's best to post a minute after the hour so you'll be listed on top of anybody who naively sets their software to release postings at exactly 9:00.)

    In this case, however, German readers and others in continental Europe were particularly important, because we're going to Berlin for the first time. Thus, I pulled the posting time forward to 7:51 a.m. Pacific time, which is 4:51 p.m. in Germany and will still reach Californians who check Twitter during breakfast.

    One of the big downsides of stream-based communication compared to email newsletters is the highly ephemeral nature of the postings: Once they scroll off the first screen, they're essentially 6 feet under.

    A look at clickthrough statistics for links posted to Twitter vs. those circulated in email newsletters shows a drastically steeper decay function: lots of clicks the first few minutes, and then almost none. In contrast, email continues to generate clicks for days as people work their way through their inboxes.

    • Clickthrough decay: Twitter time passes 10 times faster than email time.

    This makes it hard to reach an international customer base on Twitter, and makes it important to tweak the posting time relative to each topic's main target. (It's also one of the many reasons I continue to believe that email is a more powerful medium.)

    Text is a UI

    It's a common mistake to think that only full-fledged graphical user interfaces count as interaction design and deserve usability attention. As our earlier research has shown, URLs and email both contribute strongly to the Internet user experience and thus require close attention to usability to enhance the profitability of a company's Internet efforts.

    In fact, the shorter it is, the more important it is to design text for usability.

     

  • 在上一篇文章中,我们介绍了如何利用Windows Scenic Ribbon API为一个普通的Windows应用程序添加Ribbon界面。其中,我们只是简单地添加了一个Ribbon面板和一个按钮控件,还没有实现任何的具体 功能。这就像我们创建了一个Ribbon容器,等着我们将各种Ribbon控件装进去并对控件的各种消息进行处理,以实现相应的业务逻辑。

      在这一篇文章中,我们就来介绍如何向Ribbon面板添加各种Ribbon控件并实现控件的合理排布。

       微软在自己大量用户体验研究的基础上,同时积极汲取用户对第一代Ribbon界面的反馈,在第二代Scenic Ribbon界面中,提供了更加丰富的Ribbon控件,使得Ribbon界面的控件更加丰富。通过这些Ribbon控件的灵活组合应用,能够应对各种应 用程序对Ribbon界面控件的需要。下面我们就来介绍一下如何为Ribbon界面添加各种Ribbon控件并对这些控件进行排列布局。

      

      添加Ribbon界面添加应用程序菜单

       除了Ribbon面板,Ribbon界面的最大革新之处就是它的应用程序菜单。在Ribbon界面中,我们可以在Ribbon面板上布置一些常用的命令 功能,而对于一些不太常用的功能,比如文件打开关闭,系统设置等等,都可以在应用程序菜单中进行。Ribbon界面中应用程序菜单的定义非常简单,跟添加 按钮控件相似,我们需要先在XML文件的命令部分添加菜单中需要的各个菜单项:

    <!—应用程序菜单项-->
        
    <Command Name="FileMenu"
                 Symbol
    ="cmdFileMenu"
                 Id
    ="25000" />
        
    <!—为最长使用文档列表定义控件 -->
        
    <Command Name="cmdMRUList"
                 Symbol
    ="cmdMRUList"
                 Id
    ="25050"/>
        
    <Command Name="cmdMRUItems"
                 Symbol
    ="cmdMRUItems"
                 Id
    ="25051"/>
        
    <Command Name="cmdNew"
                 Symbol
    ="cmdNew"
                 Comment
    ="New"
                 Id
    ="25001"
                 LabelTitle
    ="New">
            
    <Command.LargeImages>
              
    <Image Source="NewL.bmp"/>
            
    </Command.LargeImages>
        
    </Command>
        
    <Command Name="cmdOpen"
                 Symbol
    ="cmdOpen"
                 Comment
    ="Open"
                 Id
    ="25002"
                 LabelTitle
    ="Open"/>
        
    <Command Name="cmdSave"
                 Symbol
    ="cmdSave"
                 Comment
    ="Save"
                 Id
    ="25003"
                 LabelTitle
    ="Save"
                 TooltipTitle
    ="Save tooltip title"
                 TooltipDescription
    ="Save tooltip description."/>
        
    <Command Name="cmdPrint"
                 Symbol
    ="cmdPrint"
                 Comment
    ="Print"
                 Id
    ="25004"
                 LabelTitle
    ="Print" />
        
    <Command Name="cmdExit"
                 Symbol
    ="cmdExit"
                 Comment
    ="Exit"
                 Id
    ="25005"
                 LabelTitle
    ="Exit" />


  • 【IT168专稿】在之前关于Visual Studio 2010的新特性介绍文章中,我们已经喊出了“全体程序员注意:Ribbon全面来袭!”的口号。在这里,我们不再去强调Ribbon界面的易用和高效, 也不去强调和证明它将成为未来应用程序界面的一种趋势。为了让我们的应用程序“Ready for Windows 7”,我们有必要根据实际的情况需要,为我们的应用程序添加Ribbon界面。

      在前面的文章中,我们介绍了如何为MFC应用程序添加 Ribbon界面,但是这种方法只适用于基于MFC的Windows应用程序。如果我们的应用程序是标准的Windows应用程序该怎么办呢?为了推广 Ribbon界面,为了讨好程序员们,让程序员可以轻松地为各种应用程序创建Ribbon界面,微软真是不遗余力,不断地推出新的Ribbon界面接口。 为了可以让所有基于C++的普通Windows应用程序都可以添加Ribbon界面,微软在Windows 7 SDK中,又推出了基于COM的接口——Scenic Ribbon API。

      利用Scenic Ribbon API,我们可以更加灵活方便地为各种Windows应用程序添加Ribbon界面,改善应用程序的用户体验。在接下来的文章中,我们就介绍一下如何利用这种新的方式为普通Windows应用程序添加Ribbon界面。

       我们都知道,Ribbon界面是随着Office 2007一同发布的。在过去的几年中,微软不断地吸取用户对Ribbon界面的反馈,不断地对其进行改进,到了Windows 7,微软正式加入了命名为Scenic Ribbon的第二代Ribbon界面,即取代第一代Ribbon的升级版本。随着Scenic Ribbon成为Windows 7的一部分以及微软所提供的Scenic Ribbon API,这意味着今后第三方程序开发者能在自己开发的应用程序中免费用上这种界面形式。Scenic Ribbon作为第二代Ribbon界面,所适用的是所有的Windows应用程序,和前代有所不同是理所当然的。例如,由于最初Ribbon界面是 Office专用,因此使用Ribbon界面的Office 2007程序窗口左上角都有一个比较显眼的Office图标按钮。当应用到其他程序之后,这个图标显然不能继续存在,因此在Scenic Ribbon中,这个位置就被相应应用程序自身的图标所取代。另外,为了满足各种应用程序的需要,Scenic Ribbon还添加了部分Ribbon控件,使得Ribbon界面的控件更加丰富,能够应对各种应用程序对Ribbon界面控件的需要。值得一提的 是,Office作为Ribbon界面的开山鼻祖,到了Office的下一个版本Office 2010,也全面使用了Scenic Ribbon以替代第一代Ribbon界面。

      
     图1 Office 2010全面使用Scenic Ribbon界面

     

    阅读全文:

    VS 2010与Windows7共舞:又见Ribbon