太上老菌太上老菌朝菌学园ZhaoDesign
这是我在GeeksforGeeks实习期间完成的一个项目，这是一个再设计项目，为期3个月。
01
关于GeeksforGeeks
秉承着教授编程知识的信念，印度理工学院的校友Sandeep Jain先生将梦想变成了现实，他成立了GeeksforGeeks。从一个人开始，他一砖一瓦地建立了公司，同时也勤奋地增加了宝贵的人力。如今，GeeksforGeeks已经遍布全球各地。
不管编程让你兴奋还是让你感到压抑，不管你是想知道如何准备面试问题，也不管你是想知道如何掌握数据结构和算法，GeeksforGeeks都会为你提供一站式的解决方案。随着时间流逝，我们一直在丰富自身。从计算机学科的各种文章到练习用的编程题，从基础课程到高级课程，从技术到入学考试，我们一直为你打造丰富的内容，为你提供便利。
02
问题
问题页面是GeeksforGeeks实践门户网站的一部分，在这里，有近100多万学生和专业人士来提升他们的编程技能。除了编程题，Practice Portal还为人们提供计算机科学相关的课程。但是，目前的问题页面的布局有些不足之处:
- 程序问题的发现和显示
- 视觉设计缺乏一致性
- 让人不知所措的体验
- 系统不可扩展
此外，我们还想在Practice Portal中增加“疑问支持（Doubt Support）”这一新功能。
03
我的设计过程
当我开始进行设计时，我了解到没有设计师参与设计当前版本的问题页面。在此之前，软件开发团队自己主导了“整个产品”，在审核功能方面做了出色工作。如前面所说，问题页面为各个层次的学生和在职专业人士提供服务。在不了解每个用户的需求的情况下，我要如何为这个庞大的用户群体设计呢？我意识到了这点，便下定决心去弥补这个缺陷。
04
发现和分析问题
在我做工程师的时候，我就解决了GeeksforGeeks问题页面上的一些编程问题了。是的，我是有工程背景的。我对GeeksforGeeks这个产品已经有了简单的概念，所以并不需要深入的领域分析来了解它。我一直遵循着以用户为中心的设计方法，并在此基础上获得感悟。我记录了我的一些发现。
为了更深入地了解用户的痛点，我采访了我的一些大学朋友。进行访谈的目标是为了获得定性数据，发现我可能忽略的未知问题，这样我就可以对我的设计决策更有信心。
竞品分析
我找了其他的在线编程网站。很高兴能了解到对于我们正在努力实现的事情，其他网站是怎么做的。它给了我一个不同的视角，帮助我从多个角度思考问题。我参考的一些网站有Hackerank、Leetcode和HackerEarth。
分析了竞争者之后，我发现分屏视图（Split View）功能在在线编程平台中非常突出， 因为它可以提升用户编程时的体验。 因此，我们设定分屏视图模式作为用户的默认模式。
同时，分屏视图模式让用户学习起来更容易。因此， 使用分屏模式，我们也算是遵循了“雅克布用户体验法则”，即:
| “用户的大部分时间都花在其他网站上。这意味着用户希望你的网站与他们熟悉的其他网站的使用方式相同。” |
分析当前用户界面
当前的用户界面设计中存在很多不一致的地方，在进行了用户访谈后，我发现当前的用户界面存在许多易用性问题，让人使用时感到不知所措。我深入分析了当前用户界面的不一致性以及改进方法。
当前用户界面 | 问题页
当前的UI无法提升学生的编程体验，因为涉及太多页面滚动了。
用户在解决编程问题时，往往会反复调试自己的代码。由于要反复阅读，人们倾向于进行代码的预运行。最终，这会导致过多的和不必要的页面滚动。
其实以上滚动问题通过使用分屏视图模式就能很容易得到解决，在我们的平台上也是有这一模式的。但用户却找不到它，导致最终他们离开我们的平台。
当前的UI非常凌乱；所有东西看起来都让人感觉不完整。整体的视觉设计缺乏一致性。
UI组件存在很多错误，甚至有些组件在用户解决问题时对他们来说是多余的。
总有一些问题需要长期解决。这就造成了由于函数、循环等多重嵌套而导致的横向滚动，这最终会在调试时出现问题。
有时，问题对学生来说太长了，最终导致他们会跳过这些问题。
如果用户想要解决其他问题，当前的UI会强制用户返回上一级然后再次选择问题。如果用户能够在同一页面上不受干扰地看到其他相关的问题，那么这可以提高他们的工作效率。
当前的用户界面 | 编辑器部分
05
整合归类问题
进行了用户访谈和竞品分析之后，我将用户面临的主要问题进行了归类，以便我在设计时能有正确的方向。
用户在线编程时面临的主要问题
06
构想
归类问题之后，我更容易想出解决方案了，我决定采用分屏视图作为我的基础解决方案，然后在此基础上设计解决方案。我开始思考怎样才能在编程时为用户提供“丰富且令人鼓舞的体验”。此外，我认为首先应该要设计出合理的功能，而不是制作噱头。
一些关于产品管理的推特帖子
如上文所说，我选择了分屏视图模式，这就是我们把功能分为“编辑器部分”和“问题部分”的原因。
编辑区功能
- 语言选择
- 自定义输入和输出
- 提示
- 编辑器设置
- 倒计时器
问题部分功能
- 问题区
- 编辑区
- 输出和上传
- 疑问支持与讨论
- 拖动调整问题部分窗口的大小
信息架构
有了自己的想法后，我就决定了网站要有的功能（如上所述）及界面，它们本身应该包含什么以及正确的功能优先级是什么，等等。
GeeksforGeeks实践门户的信息架构
纸质原型
确定了信息架构之后，就是设计线框图的时候了。我喜欢用笔纸来画线框图，因为这样可以节省很多时间，而且可以给人一个清晰的视角。
←左右滑动查看下一张→
纸质线框草图
07
视觉设计和原型设计
情绪板
在花了很多时间研究其他平台为编程体验提供的分屏模式后，我发现在调试时很难同时关注编辑器和问题描述上，即使这两个部分的字体不同，但仍然看起来非常相似，这是界面都很简约的缘故。
大多数情况下，所有平台的这两个部分都采用了浅色的风格，因此，有时造成这两个部分视觉上的区分度较低。
所以，我想，为什么不尝试针对不同的部分设计设计不同的主题呢？为此，我做了一个小情绪板，上面有现实生活中的试卷、终端和编程编辑器的图片。
情绪板
做了情绪板后，我们可以在编辑器部分采用深色主题，而问题描述部分采用浅色主题。于是，我用这种方法设计了一个示例界面，把它展示给我的团队和我们公司的其他一些员工，几乎每个人都喜欢这个想法。
同时，我对问题描述部分有了更多的见解，比如问题如何显示、元数据（如标记、持续时间、问题类型等）如何显示。
字体和颜色
一直以来我都是利用 Material Design Colour Tool 挑选颜色，它能帮助我从品牌颜色中选出合适的、有适当对比色调，色彩的对比也符合网页内容无障碍指南（WCAG）的要求。
颜色
高保真界面
确定好框架、排版和色彩风格后，就要开始设计高保真原型了。我使用Adobe XD来设计这些界面。
主页面-陈列主要功能
主页面
我保留了问题区的编辑、上传和疑问支持的选项，编辑器区保留了与编辑相关的功能。问题区和编辑器区都有各自的垂直滚动条。
我决定将问题相关的元数据（如难度级别、上传总数和得分）放置在问题描述区的顶部，同时，这些数据固定在可滚动页面上方。
我将编译按钮、上传按钮、提示按钮和计时器按优先级排列在编辑器的底部并固定。
我将次要的功能放在了顶部标题栏中，如问题列表、排行榜和用户简介。
问题列表
像汉堡菜单那样一层层列出的问题
在进行了定性访谈后，我发现人们很难来回多次更改和选择问题。 此外，用户已经解决了的问题也会在问题列表区显示，导致了过多的页面滚动。
我决定采用汉堡包菜单那样的列表来排列问题，这样内容就一目了然了。
在问题列表中我用高亮标出当前的问题，并且人们可以确认当前问题的已解决或未解决状态。
另一个需要考虑的问题是，要让用户能够从给定的列表中快速筛选出某个特定问题，但同时，我不想让用户对大量的筛选器感到不知所措。所以，我决定保留快速切换按钮来使用筛选功能。
最终，我选择了最后帮助用户做出决策的最主要的决定因素，同时根据难度级别、已解决或未解决的状态以及与公司和相关主题的标签来筛选问题。
输出窗口
在编译代码时，输出窗口会从问题页面的底部滑出。输出窗口包含了测试用例的结果和输入输出数据。
输出窗口的大小是固定的，这样用户就可以一次性查看问题、编辑器中的代码以及相应的输出结果。
这个输出窗口可能会让第一次使用的用户感到不知所措。为了克服这个问题，我们提供了最小化和关闭这个窗口的功能，让用户更专注于问题。用户还可以最大化输出窗口。
疑问支持
疑问支持是我们当前的问题页面的新补充。这是一个付费功能，让学生可以向我们的专家提出他们疑问。
我们希望用户能感受到使用这个功能的必要性。 因此，我们将现有的疑问和讨论免费提供给他们。为了让用户使用这个功能，我们甚至在付费订阅计划下提供了一周的免费试用期。
在客户支持（发表疑问）中，用户可以通过创建话题来提出疑问，或者也可以通过聊天框直接与我们的专家对话。当用户点击特定的疑问时，用户就会进入到问题详情，在这里用户可以发表评论和与他人进行讨论。
排行榜
我们现有的问题页面中已经有积分排行榜了，但在分屏模式下，我们很难将积分排行榜整合进去，所以我们决定采用点击式积分排行榜。
我们保留了一个积分表，当用户解决了一个问题，积分表的积分就会增加。为了实现这一机制，我们也给问题设定了积分。
点击积分按钮后，排行榜会从右侧滑入。用户可以选择查看总排名和月度排名。
奖励
（此处为视频，请在原文中观看）
我对问题页面的评分系统和弹出式模型做了一个快速的探索。这里每一块拼图代表一个问题，它们形成一个绿色的带√的圆圈就代表成功解决问题，然后它会变成一个径向进度条。
我设计这个的目的是，在用户成功解决问题时给他们一种愉快感。此外，我还购买了对比表格动画，它可以让用户看到自己解决方案的效率。
（此处为视频，请在原文中观看）
这是编译代码按钮的一个微交互，这个个简单的按钮用于在IDE中显示代码编译。在这里我介绍的是二进制数字计数器的编译过程。
08
总结
问题页面的桌面网站正在逐步发布，但用户的参与度和重复使用率已经有了实质性的增长。
09
收获
对我来说，这是一次很好的学习经历。在确定最终设计之前，我对每个界面都进行了多次探索。
这个项目教会了我如何在真实的业务场景和限制下工作，教会了我如何与设计行业之外的人合作，比如营销主管、技术内容作者、开发人员等，还让我了解了做事情的可行性。
我和Yash Kumar的增长黑客和市场经理、Harsh Agarwal前产品主管、Karan Grover高级软件开发人员和Chandan Gupta软件开发人员一起工作。在整个项目中，我在他们的指导下学到了很多。
-END-
相关阅读
用户体验设计案例研究 \| 一款帮助用户更健康地使用手机的APP
ABOUT US
相关阅读相关阅读
参考文章：
作者：Kashish Mehta
译者：太上老菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
在看点这里