I've seen something completely against all standards and it's also more an experiment, but it definitely has its wow factor. It's called Don't Click It and it's all about using an UI without clicking. Try it out for yourself, you'll be surprised how often you're tempted to click (at least that was my experience)
Support for the back button and tabbed browsing, which GMail is a prime example.
I've used far too many ( Oracle based time booking systems seem the worst for this ) which just screw up if you use 'back' to go back to the page you were on before you clicked on a link.
On one site, nationalrail.co.uk, it's almost impossible to get train times for two different queries open in different tabs, as it stores the query on a per-user basis. ( so if you open one tab, make a journey query, open another tab, make another query, then ask for later trains on the first tab you get the details for the second journey ). Sometimes I have to open chrome and firefox or use more than one computer to plan my journey.
Drop-down suggestions for a search box, like ebay, amazon, etc. all use on their sites to make it easier for users to find search keywords. Google has this too, but the feature is arguably even more useful on a site-specific search, since you don't get random keywords which don't apply to that site.
I was involved with getting the search suggestions feature onto MSDN Search several years ago, and the usage metrics since then have been phenomenal: as many as 20% of English searches use the auto-suggest feature. In search, a feature is typically successful if over 3% of searches use it, since almost all the time when searching, people just choose the default UI and move on. 20% usage is unheard of-- no other search feature I've seen (on any site) comes close.
What's particularly nice about search suggestions is that they only take up screen real estate when someone actually needs them (typing into search box) and take up zero page real estate otherwise.
Also, you can extend them beyond simple suggestion lists-- you can show preview UI (like IE8's browser-toolbar-search-box's preview images do, or even allow one-click links to search results if users want to bypass search altogether).
For me, the cleverest UI functionality is simply when, after I have executed some sort of action, I am taken to / given focus on the place in the app I am likely to need next.
eg: ToDo app - I add an item to my todo list textbox. hit enter. the app adds my item then gives the textbox back its focus to allow me to get on and add the next todo item.
I find things like this make an app much slicker and easier to use than any really fancy bits - a bit of thought for how the user will make use of a particular piece of functionality makes all the difference...
Pandora. Of course, I was wowed by uncannily it could pick unfamiliar music I would like, but the overall beauty and smoothness of the interface also made the whole first time experience a memorable pleasure. And it was easy, too, of course.
One of the features I specifically remember - and it's still there - is the way the title card of the next song to be played peeks out a little bit from the right edge of the window. A subtle tease that there's more to come.
(This whole description sounded a bit more sexual than I meant it to...)
It's hard for me to pick just one favorite UI feature. But what comes to mind when I think of good user interfaces is SmugMug. In my opinion they have far and away the best user interface among all of the online photo gallery sites.
And I'll list a few UI features that make it great:
When you click a small photo it takes you to a new page anchor (not a new page) while dynamically switching the medium-size photo you're looking at. First of all, this means that the site doesn't have to load the page over again, which would be a waste of time when you're just browsing images. Secondly, because it's a page anchor, the back/forward buttons in your browser work! I agree with Pete Kirkham, it really annoys me when a website is designed in a way that it fights you when you hit "Back". Fortunately, SmugMug is not one of those sites. In fact what they have is the ideal set up. The end result is a photo gallery that is easy to navigate while also being faster than just about anything else out there.
It conforms to the width of your browser. This isn't necessarily desirable in all sites but in a photo gallery it definitely helps.
They've implemented their own Lightbox-esque effect when you click the big image to make it even bigger. This will dim the background while you're looking at the photo and also offer more sizing options.
So it's not just one feature, and in fact there is no stand-out ground-breaking feature in any of this. But it's the combination of good UI practices coming together that makes this site very nice to use.
Google Analytics 轻而易举地击败了我见过的任何其他工具 (IMO)。直观 UI 的完美示例，以清晰的方式呈现大量信息。
Google Analytics beats anything else I've seen hands down (IMO). Perfect example of an intuitive UI to present voluminous information in a crisp manner.
Google 日历：巧妙的 UI 允许查看、添加和拖放事件无需重新加载页面即可完成一个日期与另一个日期的约会。
在这两种情况下，Gears 的离线模式都是一个很好的优点。
Gmail: for the amazing responsiveness and for the keyboard shortcuts (all of them but especially the label shortcuts: apply a label, move to label, go to label).
Google Calendar: for the clever UI allowing to view, add, and drag-and-drop events from one date to another without reloading the page.
In both case, the offline mode with Gears is a nice plus.
The stackoverflow alert bar is beautiful. I love it. Now I'm that kind of guy who has ~200 tabs open at a time, so whenever I restart firefox, there are at least a dozen websites with the stupidest prompts EVER... and that really <some word here> me off.
I like the jQuery UI ThemeRoller]1, which lets you customize a GUI theme for jQuery. Especially cool is its Firefox Bookmarklet, which lets you take a jQuery UI page and play with its appearance dynamically.
这有点深奥，因为它实际上只适用于 wiki 技术，但我认为某些 wiki 的按部分编辑功能很棒。我必须使用几个不同的 wiki，当您在不支持按部分编辑（或更糟糕的是，也不支持预览差异）的 wiki 中编辑一个非常大的页面时，您会觉得每个更改都可能结果酿成灾难。
This is a bit esoteric, because it really applies to just wiki-tech, but I think the edit-by-section feature of some wiki's is great. I have to use several different wiki's, and when you are editing a really large page in a wiki that does not support edit-by-section (or worse, also doesn't support preview your diff), you feel like like every change could result in disaster.
Very easy to use, to understand and to navigate. Fully written in Javascript; no Flash to be seen, and best of all it's open source, so anyone can use it.
First place I saw it in use was on the Netbeans site, for their roadmap page.
我认为最好的简单、最古老的 javaScript UI 增强 API 之一是 Highslide (http ://www.highslide.com/）。它绝对可以在任何地方使用（请参阅实现），并且可用于内联、ajax 或场外内容。简单、有效、精彩。
我在我的网站上使用它来拍摄简单的照片 (www.rogoff.uk.com)，但我们也在工作中将其用于更复杂的基于 Web 的应用程序。允许多个移动窗口轻松最大化浏览器中的空间和内容。
I think one of the best simple, oldest, javaScript UI enhancing API's out there is Highslide (http://www.highslide.com/). It is used absolutely everywhere (see Implementations) and can be used for inline, ajax or off-site content. Easy, effective and brilliant.
I use it on my site for simple photos (www.rogoff.uk.com), but we also use it for much more sphisticated web based applications at work. Allows multiple moving windows easily maximising space and content in your browser.
The way that some web forum applications pop-up a window, rather like a tool-tips window, that contains the first paragraph or two of the posting. When you are looking at a list of topics, trying to decide which ones are worth reading, it can get tedious to click, wait for full page refresh, click the back button, wait for page refresh again. It isn't obvious whether there is an AJAXy way to handle this since the page layout (and thinking process) for topic lists and topic threads is so different. But this one little feature, which could be implemented with or without AJAX, goes a long way to making it a more pleasant experience to browse forums.
Lots of pages use hovering for all kinds of eye-candy, and sometimes they really overdo it to the point of being annoying or making the pages hard to use, but this posting preview hover is great stuff.
发布评论
评论（25）
在
ColorSchemeDesigner
中，我们可以通过选择配色方案来进行页面预览，这对我设计网页有很大帮助应用程序。
In
ColorSchemeDesigner
we can have a page preview by selecting a color scheme which helped me a lot in designing web pages for my applications.
我见过一些完全违反所有标准的东西，而且它更像是一个实验，但它绝对有其令人惊叹的因素。它被称为不要点击，它是关于使用 UI 而无需点击。亲自尝试一下，您会惊讶地发现自己很想点击（至少这是我的经验）
I've seen something completely against all standards and it's also more an experiment, but it definitely has its wow factor. It's called Don't Click It and it's all about using an UI without clicking. Try it out for yourself, you'll be surprised how often you're tempted to click (at least that was my experience)
支持后退按钮和选项卡式浏览，GMail 就是一个很好的例子。
我使用过太多（基于 Oracle 的时间预订系统似乎是最糟糕的），如果您使用“返回”返回到单击链接之前所在的页面，这些系统就会搞砸。
在Nationalrail.co.uk 网站上，几乎不可能获取在不同选项卡中打开的两个不同查询的火车时刻，因为它是按每个用户存储查询的。 （因此，如果您打开一个选项卡，进行旅程查询，打开另一个选项卡，进行另一个查询，然后在第一个选项卡上询问稍后的火车，您将获得第二个旅程的详细信息）。有时我必须打开 Chrome 和 Firefox 或使用不止一台计算机来计划我的旅程。
Support for the back button and tabbed browsing, which GMail is a prime example.
I've used far too many ( Oracle based time booking systems seem the worst for this ) which just screw up if you use 'back' to go back to the page you were on before you clicked on a link.
On one site, nationalrail.co.uk, it's almost impossible to get train times for two different queries open in different tabs, as it stores the query on a per-user basis. ( so if you open one tab, make a journey query, open another tab, make another query, then ask for later trains on the first tab you get the details for the second journey ). Sometimes I have to open chrome and firefox or use more than one computer to plan my journey.
谷歌地图是迄今为止互联网上最聪明/最先进的非 Flash 用户界面。
Google maps is by far the most clever/advanced non-flash UI on the internet.
搜索框的下拉建议，如 ebay、amazon 等，都在其网站上使用，以便用户更轻松地找到搜索关键字。谷歌也有这个功能，但该功能可以说在特定于站点的搜索中更有用，因为您不会得到不适用于该站点的随机关键字。
几年前，我参与了 MSDN 搜索 上的搜索建议功能，以及此后的使用指标然后效果非常惊人：多达 20% 的英语搜索使用了自动建议功能。在搜索中，如果超过 3% 的搜索使用该功能，则该功能通常是成功的，因为几乎在搜索时，人们只是选择默认 UI 并继续前进。 20% 的使用率是闻所未闻的——我见过（在任何网站上）没有其他搜索功能可以与之相媲美。
搜索建议的特别之处在于，它们仅在有人真正需要它们（在搜索框中输入）时才占用屏幕空间，否则占用零页面空间。
此外，您还可以将它们扩展到简单的建议列表之外 - 您可以显示预览 UI（就像 IE8 的浏览器工具栏搜索框的预览图像一样，如果用户想要完全绕过搜索，甚至允许一键链接到搜索结果）。
Drop-down suggestions for a search box, like ebay, amazon, etc. all use on their sites to make it easier for users to find search keywords. Google has this too, but the feature is arguably even more useful on a site-specific search, since you don't get random keywords which don't apply to that site.
I was involved with getting the search suggestions feature onto MSDN Search several years ago, and the usage metrics since then have been phenomenal: as many as 20% of English searches use the auto-suggest feature. In search, a feature is typically successful if over 3% of searches use it, since almost all the time when searching, people just choose the default UI and move on. 20% usage is unheard of-- no other search feature I've seen (on any site) comes close.
What's particularly nice about search suggestions is that they only take up screen real estate when someone actually needs them (typing into search box) and take up zero page real estate otherwise.
Also, you can extend them beyond simple suggestion lists-- you can show preview UI (like IE8's browser-toolbar-search-box's preview images do, or even allow one-click links to search results if users want to bypass search altogether).
对我来说，最聪明的 UI 功能就是当我执行某种操作后，我被带到/关注应用程序中我接下来可能需要的位置。
例如：ToDo 应用程序 - 我将一个项目添加到我的待办事项列表文本框中。按回车键。该应用程序添加了我的项目，然后让文本框重新获得焦点，以便我继续并添加下一个待办事项。
我发现这样的事情使得应用程序比任何真正花哨的部分都更加流畅和易于使用 - 稍微考虑一下用户将如何使用特定的功能会让一切变得不同......
For me, the cleverest UI functionality is simply when, after I have executed some sort of action, I am taken to / given focus on the place in the app I am likely to need next.
eg: ToDo app - I add an item to my todo list textbox. hit enter. the app adds my item then gives the textbox back its focus to allow me to get on and add the next todo item.
I find things like this make an app much slicker and easier to use than any really fancy bits - a bit of thought for how the user will make use of a particular piece of functionality makes all the difference...
超链接。
我知道这不光彩也不圆滑，但想象一下早在 1965 年就有这样的想法！？！
这太聪明了！
Hyperlinks.
I know it's not glamour or slick, but imagine thinking that up way back in 1965!?!
That was clever!
Google 主页的高效简洁。
The efficient simplicity of Google main page.
在 stackoverflow 上创建帐户非常简单，并且与 OpenId 完美集成。
现在，每当我需要网站登录系统时，我都会考虑使用 OpenId，因为我已经体验到了它的工作效果。
The way it is so simple to create an account on stackoverflow and the great integration with OpenId.
I will now consider using OpenId whenever I need a logon system for a website, now that I have experienced how well it can work.
潘多拉。当然，令我惊奇的是它竟然能挑选出我喜欢的不熟悉的音乐，但界面的整体美观和流畅也让整个第一次体验成为一种难忘的乐趣。当然，这也很容易。
我特别记得的一个功能 - 现在仍然存在 - 是下一首要播放的歌曲的标题卡从窗口的右边缘稍微露出一点。一种微妙的挑逗，表明还有更多的事情即将发生。
（整个描述听起来比我的意思更性感......）
Pandora. Of course, I was wowed by uncannily it could pick unfamiliar music I would like, but the overall beauty and smoothness of the interface also made the whole first time experience a memorable pleasure. And it was easy, too, of course.
One of the features I specifically remember - and it's still there - is the way the title card of the next song to be played peeks out a little bit from the right edge of the window. A subtle tease that there's more to come.
(This whole description sounded a bit more sexual than I meant it to...)
我真的很喜欢 Freckle 的界面。他们让通过他们的界面跟踪时间变得非常容易。
I really like the interface of Freckle. They make it really easy to track time with their interface.
我很难只选择一项最喜欢的 UI 功能。但当我想到良好的用户界面时，我想到的是 SmugMug。在我看来，他们无疑拥有所有在线照片库网站中最好的用户界面。
请允许我随机选择一个画廊：
http://collierphotography.smugmug.com/Photography/Colorado/ 9289093_h9zBa
我将列出一些让它变得很棒的 UI 功能：
当您单击小照片时，它会将您带到新的页面锚点（而不是新页面），同时动态切换中等尺寸的照片你正在看。首先，这意味着网站不必重新加载页面，当您只是浏览图像时，这会浪费时间。其次，因为它是页面锚点，所以浏览器中的后退/前进按钮可以工作！我同意皮特·柯卡姆的观点，当一个网站的设计方式是当你点击“返回”时它会与你战斗，这真的让我很恼火。幸运的是，SmugMug 不是这些网站之一。事实上，他们所拥有的是理想的设置。最终结果是一个易于导航的照片库，同时比其他任何东西都更快。
它符合您的浏览器的宽度。这不一定适用于所有网站，但在照片库中它绝对有帮助。
当您单击大图像使其变得更大时，他们已经实现了自己的灯箱式效果。当您查看照片时，这将使背景变暗，并提供更多尺寸选项。
因此，它不仅仅是一个功能，而且事实上，其中任何一个功能都没有突出的突破性功能。但正是良好的 UI 实践的结合才使得这个网站非常好用。
It's hard for me to pick just one favorite UI feature. But what comes to mind when I think of good user interfaces is SmugMug. In my opinion they have far and away the best user interface among all of the online photo gallery sites.
Allow me to pick a gallery at random :
http://collierphotography.smugmug.com/Photography/Colorado/9289093_h9zBa
And I'll list a few UI features that make it great:
When you click a small photo it takes you to a new page anchor (not a new page) while dynamically switching the medium-size photo you're looking at. First of all, this means that the site doesn't have to load the page over again, which would be a waste of time when you're just browsing images. Secondly, because it's a page anchor, the back/forward buttons in your browser work! I agree with Pete Kirkham, it really annoys me when a website is designed in a way that it fights you when you hit "Back". Fortunately, SmugMug is not one of those sites. In fact what they have is the ideal set up. The end result is a photo gallery that is easy to navigate while also being faster than just about anything else out there.
It conforms to the width of your browser. This isn't necessarily desirable in all sites but in a photo gallery it definitely helps.
They've implemented their own Lightbox-esque effect when you click the big image to make it even bigger. This will dim the background while you're looking at the photo and also offer more sizing options.
So it's not just one feature, and in fact there is no stand-out ground-breaking feature in any of this. But it's the combination of good UI practices coming together that makes this site very nice to use.
Google Analytics 轻而易举地击败了我见过的任何其他工具 (IMO)。直观 UI 的完美示例，以清晰的方式呈现大量信息。
Google Analytics beats anything else I've seen hands down (IMO). Perfect example of an intuitive UI to present voluminous information in a crisp manner.
Ajax 日历 例如
http://www.asp.net/AJAX/AjaxControlToolkit /Samples/Calendar/Calendar.aspx
真正有用（那是一周中的哪一天？）并且不会妨碍。
Ajax calendars e.g.
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx
Genuinely useful (what day of the week is that?) and don't get in the way.
Facebook 是 Ajax 网站的一个很好的例子。看起来不错并且工作得很好（并不完美；））
Facebook is a great example of an ajax site. Looks good and works well (not perfectly ;))
Gmail：令人惊叹的响应能力和键盘快捷键（所有这些，尤其是标签快捷键：应用标签，移动到标签，转到标签）。
Google 日历：巧妙的 UI 允许查看、添加和拖放事件无需重新加载页面即可完成一个日期与另一个日期的约会。
在这两种情况下，Gears 的离线模式都是一个很好的优点。
Gmail: for the amazing responsiveness and for the keyboard shortcuts (all of them but especially the label shortcuts: apply a label, move to label, go to label).
Google Calendar: for the clever UI allowing to view, add, and drag-and-drop events from one date to another without reloading the page.
In both case, the offline mode with Gears is a nice plus.
stackoverflow 警报栏很漂亮。我喜欢它。现在我是那种一次打开大约 200 个选项卡的人，所以每当我重新启动 Firefox 时，至少有十几个网站会出现最愚蠢的提示有史以来...而且真的< code><这里说几句话>我走了。
The stackoverflow alert bar is beautiful. I love it. Now I'm that kind of guy who has ~200 tabs open at a time, so whenever I restart firefox, there are at least a dozen websites with the stupidest prompts EVER... and that really
<some word here>me off.我喜欢 jQuery UI ThemeRoller]1，它允许您为 jQuery 自定义 GUI 主题。特别酷的是它的 Firefox Bookmarklet，它可以让您获取 jQuery UI 页面并动态地调整其外观。
I like the jQuery UI ThemeRoller]1, which lets you customize a GUI theme for jQuery. Especially cool is its Firefox Bookmarklet, which lets you take a jQuery UI page and play with its appearance dynamically.
这有点深奥，因为它实际上只适用于 wiki 技术，但我认为某些 wiki 的按部分编辑功能很棒。我必须使用几个不同的 wiki，当您在不支持按部分编辑（或更糟糕的是，也不支持预览差异）的 wiki 中编辑一个非常大的页面时，您会觉得每个更改都可能结果酿成灾难。
This is a bit esoteric, because it really applies to just wiki-tech, but I think the edit-by-section feature of some wiki's is great. I have to use several different wiki's, and when you are editing a really large page in a wiki that does not support edit-by-section (or worse, also doesn't support preview your diff), you feel like like every change could result in disaster.
时间轴控件让我震惊不已。 simile-widgets.org/" rel="nofollow">Similie 小部件。
非常易于使用、理解和导航。完全用Javascript编写；没有 Flash 可供查看，最重要的是它是开源的，所以任何人都可以使用它。
我第一次看到它的使用是在 Netbeans 网站上，他们的路线图页面。
I was blown away by the Timeline control by Similie Widgets.
Very easy to use, to understand and to navigate. Fully written in Javascript; no Flash to be seen, and best of all it's open source, so anyone can use it.
First place I saw it in use was on the Netbeans site, for their roadmap page.
我非常喜欢 Remember The Milk SmartAdd 编辑框。这是一种将所有信息设置在一个地方的简单而强大的方法。
http://www.rememberthemilk.com/services/smartadd/
I like Remember The Milk SmartAdd edit box very much. It is simple and powerful way to set all information at one place.
http://www.rememberthemilk.com/services/smartadd/
我认为最好的简单、最古老的 javaScript UI 增强 API 之一是 Highslide (http ://www.highslide.com/）。它绝对可以在任何地方使用（请参阅实现），并且可用于内联、ajax 或场外内容。简单、有效、精彩。
我在我的网站上使用它来拍摄简单的照片 (www.rogoff.uk.com)，但我们也在工作中将其用于更复杂的基于 Web 的应用程序。允许多个移动窗口轻松最大化浏览器中的空间和内容。
I think one of the best simple, oldest, javaScript UI enhancing API's out there is Highslide (http://www.highslide.com/). It is used absolutely everywhere (see Implementations) and can be used for inline, ajax or off-site content. Easy, effective and brilliant.
I use it on my site for simple photos (www.rogoff.uk.com), but we also use it for much more sphisticated web based applications at work. Allows multiple moving windows easily maximising space and content in your browser.
Grooveshark 的新 HTML5 界面非常出色。
The new HTML5 interface of Grooveshark is excellent.
我喜欢基于flash的真实全屏效果......
I like the flash based real true full screen effect...
某些网络论坛应用程序弹出一个窗口的方式，很像工具提示窗口，其中包含帖子的第一段或第二段。当您查看主题列表，试图决定哪些主题值得阅读时，单击、等待整页刷新、单击后退按钮、再次等待页面刷新可能会很乏味。由于主题列表和主题线程的页面布局（和思考过程）如此不同，是否有 AJAXy 方法来处理这个问题并不明显。但是这个小功能（可以使用或不使用 AJAX 来实现）对于使浏览论坛成为一种更愉快的体验大有帮助。
许多页面都使用悬停来实现各种养眼效果，有时它们确实做得太过分了，以至于令人讨厌或使页面难以使用，但这种发布预览悬停是很棒的东西。
The way that some web forum applications pop-up a window, rather like a tool-tips window, that contains the first paragraph or two of the posting. When you are looking at a list of topics, trying to decide which ones are worth reading, it can get tedious to click, wait for full page refresh, click the back button, wait for page refresh again. It isn't obvious whether there is an AJAXy way to handle this since the page layout (and thinking process) for topic lists and topic threads is so different. But this one little feature, which could be implemented with or without AJAX, goes a long way to making it a more pleasant experience to browse forums.
Lots of pages use hovering for all kinds of eye-candy, and sometimes they really overdo it to the point of being annoying or making the pages hard to use, but this posting preview hover is great stuff.