通过导航加强用户体验的3个原则

文章介绍了导航设计中的3个原则,将以下原则付诸实践,或许会使用户体验大大Max!


文章介绍了导航设计中的3个原则,将以下原则付诸实践,或许会使用户体验大大Max!

通过导航加强用户体验的3个原则

你是否正准备评估一个数码产品并且不知道从何入手?或许你需要一些关于如何通过导航加强用户体验的指导?

这篇文章将着眼于我作为一个用户体验顾问在日常工作实践中的三个导航原则。这些包括:

  1. 信息架构(IA),符合用户的心理模型(即他们期待特性和内容如何被构建)
  2. 构建导航的方法易于识别并且具有一致性
  3. 导航提供的选项数是合理的

请随时把以下框架融入自己的用户体验流程!

对于数码产品来说,导航是什么?

导航描述了用户浏览网站和移动应用程序的方法。这是更广泛的信息体系结构的结构和功能的一部分。

导航的一个重要组成部分也是“发现”或者“签署发布”,这涉及到让人们知道他们哪些地方经由不同的线索和处理关联起来。网站或者软件的每个页面都可能只是被一个用户浏览,所以一些和目的相关的上下文是重要的。

原则#1

信息架构符合用户的心理模型以及它们期望在网站或应用程序特性和内容如何被构建的。

定义结构

在设计导航之前定义IA是很重要的。可以做一种卡用来组织不同的页面转化为不同的类别。你可以与用户组即你征求一些目标用户一起做这些,让他们安排不同的标签组或使用专家设计,

有许多工具可以用来定义你的网站或软件的结构。

CTA引导用户期望吗?

网站的信任和可信度取决于一些小细节,比如拼写错误之类的东西,但也取决于按钮或链接的对齐以及他们的引导。

例如,如果用户在产品页面上说“现在购买”,你会希望被带到一个页面用购物车购买该产品。

你应该减少每页调用操作的数量或者至少给他们不同的视觉负担。

通过导航加强用户体验的3个原则

“我觉得幸运吗?“是一个模糊/不必要的指令

菜单在熟悉的地方吗?

看看你的设计内容。人们习惯于看到导航,例如在一致的地方中的菜单。

例如,iOS手机菜单在屏幕的底部,而Android会显示一个汉堡包导航选项菜单。您可能想要查看一个网站如pttrns.com去看已被精心设计为一个特定的平台的视图导航模式。

原则#2

在整个网站或应用程序中,导航结构的方法易于识别和可持续性使用。

你期望的东西在哪里?是结构明确和一致吗?

完整的用户体验是建立在用户经受的一切之上。建立在我们所知道的导航和所有不同组件之上。

例如,在被设计时网站应遵守标准规范。

用一个网站举例来说明不同的组件都包括什么。可能包括商标和品牌,导航/视觉设计变化,上下文提示向导/步骤,面包屑,url,标题甚至窗口页面标题!

通过导航加强用户体验的3个原则

《经济学人》表明你在哪里

  1. 商标和品牌
  2. 导航栏的交互
  3. 页面标题
  4. 文章标题
  5. 上下文线索

原则# 3

选项的数量是合理的(即任何一次都不超过5 – 7项)

在任何界面产品中,无论是一个iOS应用程序或网站,你应该让选项尽量少。

你不希望用户丢失,或者被你的网站的结构搞晕。提供选项的数量应该是合理的。

在我的经验中,有太多的选择可以超载用户会适得其反,你想实现什么业务。你应该有一个小而且有针对性的常用选项。

我经常会问产品所有者或者有对这块熟悉的人,用户使用最多或者优先考虑的选项是什么。

通过导航加强用户体验的3个原则

在上面的例子中,在英国广播公司(BBC)的网站上可以看到下拉选择。顶级的选项包括八项。下拉选项有如果用户需要访问更多东西时可以访问的很多不同的链接的选项。

在这样的网站订单事情按字母顺序不合理,但是整理以便他们最经常访问的。如果你有一个现有的网站您可以设置一些分析来确定他们,或建立某种类型的卡片分类活动。

对于一个典型的网站,应该是在每个页面,非常简单的以一致的方式列出七个左右的链接。如果你工作在一个大规模的有重要的信息架构网站,你将需要仔细考虑 如何构建你的链接。

结论

这里有几个驱动强大的用户体验与导航的原则。你应该识别并理解被用来定义导航的启发和原则。首先,作为一个好的设计实践的提醒,其次对现有产品进行评估。

一个网站的基本结构,IA和不同的页面,标签和链接应该符合用户的预期。此外,是值得思考的背景下,你的产品/网站和考虑任何约定或模式,用户熟悉的平台。

值得思考的是你的产品或网站的上下文以及用户熟悉的任何平台协议或模式。

用这个作为指导来构建一个一致且直观的体验。此外,你应该考虑最重要的页面或选项,将它们放在页面的顶部。根据我的经验,超过其个导航选项明显是有些过火了。其他不重要的选项,例如“设置”可以在需要的时候才出现

 

原文作者:Joel

原文地址:3 Principles for Strong User Experience Through Navigation

翻译:浅笑d42021

译文地址:http://www.ui.cn/detail/215651.html

版权:人人都是产品经理遵循行业规范,任何转载的稿件都会明确标注作者和来源,若标注有误,请联系主编QQ:419297645

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

(0)
CatherineCatherine
上一篇 2017-05-06 13:51
下一篇 2017-05-06 15:51

相关推荐

  • iOS 10 交互设计指南

    几乎所有的iOS应用都由UIKit framework中定义的组件构成,了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中提供更好的帮助。UIKit提供的UI组件分为以下4种类型:栏包含了上下文信息来指引用户…

    2017-08-01
  • 转场动效的5个核心规则

    本文作者通过大量的案例分析和过来人的经验,总结了优秀转场动效的5个核心的规则。enjoy~

    2017-04-27
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • 聊一聊常见的登录交互方式

    现在市场上面的APP种类繁多,而登录注册的方式也有很多,下文就简单来分析一下各种登录的交互方式,谈谈自己对这些方式的见解。

    2017-05-26
  • 拆解【用户体验要素】

    作为产品经理不但要有能力作出产品设计和规划,更要尊重用户,作出用户体验更佳的产品【用户体验要素】告诉我们如何更好的设计出让用户体验更佳的产品方法论,那么这本书如何更好的应用到实战中,我们如何更好的将理论与实践结合呢?我们今天简单来阐述一下【用户体验要素】概论知识初识【用户体验要素】【表现层】我们所能看到的一系列的网页的元素:图片、文字、按钮等,有些图片就是图片,单纯的进行展示;有些图片或者文字有可能就是一个按钮链接,通过点击可以执行某种...

    2018-05-05
  • 【笔记】服务设计方法及手机操作系统设计

    2017年7月9日,UXRen深圳分舵在ThoughtWorks大型培训教室主办了《手机系统设计、服务设计和可视化思维,这次全都有!》的分享活动,本文基于下面2位嘉宾的主题分享整理而成:   嘉宾1:庞博(ThoughtWorks用户体验…

    交互专题 2023-03-03
  • 看过英国院校的交互设计之后,你还想报国内的同专业吗?

    今天我们来聊一聊交英国的互设计专业。随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在高考填报志愿时,会选择交互设计专业。国内开设交互设计专业的院校较少,即便有,也是和工业设计剪不断理还乱,分为实体产品和互联网产品两种方向。国内交互专业普遍存在的问题是,学校教的知识过于浅显泛泛,教学内容与行业需求脱节。...

    2018-02-26
  • 微软设计师分享|七个技巧,帮你提高产品的用户体验

    今天为大家带来的一位在微软工作的用户体验设计师——JoannaNgai的设计分享,主要讲述了7个如何提高产品设计体验的小的技巧,个人觉得她的见解结合了产品思维和设计思维,简单明了,当然要让我们体会的更深刻,就需要我们在日后工作中来细细体会。

    2017-05-09
  • 从交互层面探讨:不一样的 App 该如何设计?

    针对APP同质化现象,本文作者从从交互层面探索了不一样的 App 该如何设计,且谈及自己的解决方案。值得一读。     “首先占据人们大多数时间的同类型APP内容高度同质化,而风格取决于内容,在平庸的内容下只能诞生风格平庸的APP设计。其次,对于以商业目标为根本的APP应用设计开发,设计风格的投入产出比并不高(游戏依然除外),设计模式的流行以及交互方式的单一使得保守的设计投入产出更高。最后在现今的消费领域,功能主义盛行,界面设计中理性居于主导地位,设计风格显示不是理性思考的首要考量目标。”

    2017-05-04
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04