黑客新闻 用户体验+UI Redesign Process

几周前,我花了一个周末重新设计了我最喜欢的网站之一,黑客新闻。一段时间没有进行重新设计,我知道我要做的第一件事是建立一些动机来重新设计网站。

原始HN设计: news.ycombinator.com

黑客新闻-原始-被截断

Photoshopd文章#7-28出来了’会占用整个该死的职位!

我的HN重新设计: 

单击此图像可放大到全分辨率视图

单击此图像可放大到全分辨率视图

TL; DR我使用的过程

1.启发式分析

作为常规 user of 黑客新闻, I had to put on a pair of fresh eyes.

我抓取了整个页面的图像,然后放大,从左到右缓慢移动。如果我是新用户,一切都有意义吗?

用户体验-初学者-黑客-新闻放大

启发式方法基本上意味着“best practices,”所以我评估了该网站以测试该网站是否使用 用户体验 约定。 我发现这些是最大的问题 在我的启发式分析中

  • 系统状态的可见性
    用户可能不完全知道主页是最新的,投票最多的内容的过滤器
  • 搜索栏的位置
    It’位于页面底部
  • 分页
    没有分页,只有一个“More” button
  • 项目分组
    不同功能的项目组合在一起– should be separated

2.用户测试

I was so used to 黑客新闻 that it was natural to assume others used it the same way I did.

所以我问了几个朋友’在浏览该网站之前,您从未访问过HN。以下是我们的用户测试中的一些示例任务:

  • 告诉我你看到了什么
  • 你能告诉我你如何’d view new 文章s
  • 让’s say you’重新寻找特定文章。你会怎么做?

仅仅通过与几个用户一起进行操作,我就发现了一些有趣的见解,并从启发式分析中证实了我的怀疑:

内容过滤 

用户似乎选择了“New” and “Comments”这些就像是内容过滤器。

但 when I asked them “您能告诉我哪里可以找到最受欢迎的内容吗?”2/3的用户苦苦挣扎,并尝试点击其他过滤器 询问,工作和提交.

一位用户本能地单击了Y Combinator徽标并询问“is this it?”

我的结论是’t clear to new users that the home page of 黑客新闻 is pretty much a filter of the most popular (by upvotes) recent posts.

这也说服了我,通过将这些部分与标题分开并分成自己的部分,使过滤内容更加明显“filter tabs.”

分页

“您能告诉我如何在此页面上查看更多内容吗?”

用户花了一段时间才发现“More”按钮,但是掌握了它。

用户体验-初学者-黑客-新闻-更多箭头

 

However, 当我问他们to go back to the previous page, they froze for a second. “I guess I’将使用后退按钮。”

这使我确信页面应该是分页的,而不是只有一个方向“More” button.

搜索

当要求用户搜索特定文章时,他们也冻结了一段时间。 其中一位用户使用CTRL + F并说“maybe I’ll find it this way.”

然后,当我要求他们向下滚动页面时, 当我要求他们向下滚动到页面底部时,他们说“哦,搜索栏在这里?为什么不把它放在顶部。”

用户体验-初学者-黑客-新闻-脚步搜索

这也证实了我对搜索栏的感受。

提交并登录

最有说服力的非语言符号之一是用户何时  第一次看到页面时。他们在提交和登录时都着眼睛 pages:

用户体验-初学者-黑客-新闻-登录页面

“此页面有点难看。”

我也是那么想的。我们从首页上的漂亮的橙色变成了纯白的功利主义白色。

我也想到了– 为什么要进入单独的页面只是为了登录? 为什么不只使用弹出窗口? (您’会在这篇文章的结尾看到一个设计)

3.草绘

有了洞察力,我开始 素描 用户界面。

用户体验-初学者-黑客-新闻-HN-草图

这里’是我在草图中所做的更改的快速列表

  • 将相似项目分组在一起 例如搜索,提交和登录(所有操作)
  • 在自己的部分中将过滤器/内容页面分组
  • 标题更改为“Show HN” and “Ask HN”这样用户可以在网站标题之间建立更清晰的联系“Hacker 新s”和常用的缩写“HN”
  • 增加分页
  • 清理页脚

4.素描+ Photoshop时间

那里’这个设计没有什么花哨的地方,因此任何版本的Photoshop(或任何其他工具)都足够了。

使用的字体: Avenir
我想要一个通用的字体,它有多种变化(从浅色到粗体),而且又干净又极简。我忘记了在哪里找到Avenir,但绝对记得使用Google搜索类似“不错的光可读体型。”

色彩: 用过的 ColorZilla Chome插件挑选黑客新闻’颜色。然后,我根据该颜色调整了颜色,使其外观更加柔和。我知道这不是HN的品牌颜色,但是该死’s my redesign :p

图示:搜索图标来自 雕文6 图标集

自从我开始以来,最耗时的事情是确保所有内容都对齐并确保每篇文章看起来正确’将重复该设计13次。 复制事物是测试设计是否可以执行的快速方法“scale.”

最终设计(具有登录功能的新功能)在此处:

单击此图像可放大到全分辨率视图

重新设计的问题:

永远不要进行设计或重新设计“done,”所以我该怎么做才能使设计更好?

  • *编辑:文字–特别是文章测试太该死了。 igh,应该’我让我妈妈先看一下设计:p
  • 可以使用更多的用户测试(我有3个)
  • 输入代码 的HTML+的CSS 为了运作 原型 给人们玩
  • 头脑风暴,如何在不牺牲首页的情况下放置更多内容(原本是30个,而我的是14个)(理想情况下,新的分页将抵消这一点并鼓励人们查看更多内容。)
  • 我应该’ve用视频捕获或至少一个共享用户所说内容的音频文件记录了我的用户测试。

对你本来很好’所有人都能看到真实的用户测试反应。

想要.sketch + psd File?

在下面订阅以获取设计文件以及许多其他赠品。

黑客新闻 Redesign Files Dropbox Link

关于作者

盎司

脸书 推特

Oz首次创建UX Beginner是一种记录自己成为UX设计师的旅程的方式。现在,该站点通过UX职业资源,文章和课程,帮助成千上万的专业人员过渡到用户体验领域。

7 评论 on “Hacker 新s 用户体验+UI Redesign Process”

  1. 嗨,刚刚注册了您的博客。我将Balsamiq用于样机。一旦您对第一个草图比较满意,就可以在可以创建完全交互式的线框的人员上进行测试,以用于用户测试。它可用于手机,平板电脑和台式机设计(具有所有模板和功能)。菜单链接,按钮链接,手风琴作品等。它导出为PDF,因此您可以通过电子邮件发送给他人使用。它’虽然不是免费的,但曾经有过79美元的折扣,但是我用了多少钱后,我很高兴为此付出代价。

发表评论

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.