译文|为未来的SaaS应用,提供新的交互及视觉设计

本文介绍给大家一些基本需要关注的点,以及我们设计团队通过在相当长的时间内的试验和学习,如何为在线办公应用Zoho设计更好的用户体验?


本文介绍给大家一些基本需要关注的点,以及我们设计团队通过在相当长的时间内的试验和学习,如何为在线办公应用Zoho设计更好的用户体验?

译文|为未来的SaaS应用,提供新的交互及视觉设计

最近在做B2B的网站后台,B2B模式网站后台交互与网页版的企业级办公产品交互有很多共通之处,设计时可借鉴此类网页应用比较流行的模式。

SaaS,一种网页应用。(Software as a service,它是一种软件交付模式。在这种交付模式中云端集中式托管软件及其相关的数据,软件仅需透过互联网,而不须透过安装即可使用。用户通常使用精简客户端经由一个网页浏览器来访问软件服务。)

云端软件即服务已代替传统笨重的桌面软件,打造优异的用户使用界面让你的应用脱颖而出已是势在必行之事,然而这也意味着诸多的挑战。

设计问题

在说如改何良设计之前,有一些设计问题需要先提出来:

  • 布局:考虑新的趋势、习惯、多平台多设备
  • 产品工作流程(workflow):The less time it takes, the more UX points we win 一个好的产品用户体验是它能花更少的时间让用户完成任务
  • 视觉设计:毫无疑问,需要漂亮的界面
  • 表单(forms):表单是枯燥的,没有人喜欢填写表单。但是我们又离不开表单,所以它必须被设计得易填写

如何设计

我们是如何重新设计的?

从旧的过时的界面到新的时尚的界面,ZoHo Books经历了数年的改进。每次改进我们都进行了大范围的用户可用性测试,可用性测试对了解哪些改进设计能产生更好的结果相当重要。

可以先将同事作为测试的主体“Your employee experience is where your customer experience begins”——Jennifer Winter

1、导航

顶部靠右的标签卡式导航改为左侧导航。

译文|为未来的SaaS应用,提供新的交互及视觉设计

如果你经常使用SaaS应用,你会发现越来越多的产品在使用左侧导航了!

原因:

  • 宽屏趋势下,更多的横向空间,有放置左侧导航的位置,且容易触控;
  • 节省垂直空间,以便主体内容更好的利用;
  • 在侧边栏可以放置更多的菜单项(可上下滑动)。

2、三栏布局

三栏的布局是目前侧边导航的扩展,在第二栏展示项目列表,在右侧内容区展示在第二栏中选中的列表项的详细内容。

译文|为未来的SaaS应用,提供新的交互及视觉设计

3、让表单更有趣味性

(1)让表单填写更加容易,交互更容易识别——设计自定义表单控件,以下是我们个性化设计的表单控件:

下拉搜索菜单、下拉菜单加入添加操作(直接在下拉菜单中添加选项,免去跳到其他页面编辑添加)、下拉菜单项分组;

译文|为未来的SaaS应用,提供新的交互及视觉设计

(2)把不同表单项规组到不同标签卡下,不要把所有表单都平铺在一个页面中,可以根据使用情况进行分类;

译文|为未来的SaaS应用,提供新的交互及视觉设计

(3)从视觉上提升可读性:

可读性是表单易填写的重要因素。我们通过调整表单区的色彩和焦点,呈现更加舒适的视觉体验。

译文|为未来的SaaS应用,提供新的交互及视觉设计

4、右侧栏

利用屏幕右侧多出的空间放置与正文内容相关的操作。

译文|为未来的SaaS应用,提供新的交互及视觉设计

5、设计时考虑上下文操作

把所有支线的任务融进主任务页面中,而不是把它们分别放在不同的页面去操作(当下的网页技术及网页响应速度,可以在页面不跳转的情况下完成多项任务)。比如下图展示了当用户在Zoho Books为商品/服务创建发票时,我们是如何依据情景提供商品/服务所需的设置项。

译文|为未来的SaaS应用,提供新的交互及视觉设计

 

作者: jelumalai

原文来自Medium,题目《Modern UI/UX for SaaS applications in 2015 and Beyond》

原文地址:https://medium.com/hackerpreneur-magazine/modern-ui-ux-hacks-for-saas-applications-in-2015-and-beyond-f7b9a4f231dd#.v710e1is0

译者:木野蔡

译文地址:http://jdc.jd.com/archives/1812

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28309/

(0)
CatherineCatherine
上一篇 2017-05-20 14:31
下一篇 2017-05-20 16:41

相关推荐

  • 日期选择器设计总结

    本文是作者对时间选择器设计做的一个小总结。enjoy~

    2017-04-27
  • 顾振宇:Ubiquitous Fun-交互设计的享乐主义未来——上海交通大学创新设计论坛-体验和交互设计分论坛

    演讲题目 Ubiquitous Fun-交互设计的享乐主义未来 在可预见的未来,随着用户数据的积累和人工智能的发展,产品“可用性”问题会逐渐淡出我们的讨论主题,同时,人们对物质的需求总是非常有限的,因此“实用性”价值空间…

    2017-01-03
  • Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • ​ 不尊重用户体验如何“携程”丨每日时评

    高考作文干货/素材/知识/热点如果你想要作文素材、资料...加我微信:13261345736备注下你想要解决的问题点播时间(今天的歌单车是@光芒点播给大家的,如果你也想点歌,请留言:歌名+歌手~)当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放单车陈奕迅 - Shall We Dance? Shall We Talk!作文君说昨天刚和同学们说完OTA(在线旅行社)网站搭售的问题,今天我们再来具体看看,携程在用户体验上面临的问题...

    微信热点 2018-02-10
  • 如何设计一份专业且有价值的交互规范

    很多设计团队都会有一套比较成熟完整的交互规范,好的交互规范能够保证设计的一致性,减少沟通和开发成本,提升效率。由于笔者是设计手机系统和App相关的,所以简单的和大家聊下如何设计交互规范。

    2017-05-11
  • 交互设计的3大要素:用户、目标、行为

    交互的三要素:用户、目标、行为 讲个故事,小鹏是个销售员,下午出去拜访客户,完事后发现已经六点多了,非常饿,小鹏想回家自己做饭吃,但是实在是太饿了,回家又要做好久的地铁,还不如就在附近找家小饭馆吃了呢…

    2016-05-08
  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • 【涨姿势】Twitter安卓端体验的全面革新

    手机设计 第一步 我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航,这些功能是由客户所描述的,使用这些功能,我做出了App的基本用户使用流程。然而,在这个项目中上述行为都是不必要的,因为twitt…

    IxD案例 2015-08-27
  • 独家 | 马化腾:用户体验,比一切事情都大

    内容来源:2017年4月26日下午,“清华-青腾未来科技学堂”发布会在深圳举办,马化腾出席了发布会,并以创业者的身份与在场的青腾学员进行交流,分享腾讯的创业经验。笔记侠经主办方授权发布。责编| Even第1715篇深度好文:2825字 | 3 分钟阅读独家·精华笔记·商业思维本文新鲜度:★★★★+口感:绿茶笔记君邀您,先思考:1、战略选择的第一步是什么?2、怎么通过用户体验打动用户?3、如何从互联网跨界中找到大的商机或蓝海?我非常希望也...

    2018-02-01
  • 涨姿势 | 这份交互设计纲领,已被我内定!

    最近一个月的电影市场完全被《头号玩家》支配,身边清一色的“自来水”,那票房蹭蹭涨,眼瞅着都十好几亿了!所以斯芬克趁此良机跟大家说说交互这门自带特效的技术!往期内容一览:服装设计出国学?看这一篇就够了!(点击此处查看详情)学平面设计前,给你一份须知!(点击此处查看详情)怎样做准备,才能当上室内设计玩家?(点击此处查看详情)交互设计适合你吗?我们往往会觉得,交互设计不就是做个网站、搞个APP么,最多再玩玩特效啥的……其实咧,交互可不仅仅存在...

    2018-04-27