与之实现的内联网响应设计technique enables employees to access all intranet content on any mobile device or computer. A responsive-design intranet (or public-facing website) has only one codebase but typically has different user experiences for desktop and smaller-screen mobile displays, perhaps a third UX for tablets, and possibly even more user experiences for other devices and screen sizes. Since designers are able to choose how and where the content and features should appear on each device, a responsive intranet can create the best possible UX for employees no matter which device they are using.

这意味着intrane responsive-design方法t designers should:

  • research the relative importance of particular features and content to users and the organization
  • present and position that content to reflect the determined priorities.

来自伟大设计师的建议

我重新访问了我们赢取了我们赢取的Intranet设计团队的两个成员的内容优先级选择选择Intranet设计年度2014年ABT Associates.riptiC.。这些组织的内联网非常不同:第一个支持来自世界各地的数千个用户,而第二个支持大约有20名员工的员工。他们所拥有的共同之处是他们都是在内部网上使用响应设计的优秀例子

本文讨论了这些团队在优先考虑不同设备的功能和内容时为其响应设计内联网进行的一些选择。一些建议浮出水面;它们将帮助您在响应Intranet设计中优先考虑您自己的内容。

确定您的员工如何在移动设备上访问Intranet

ABT Associates是一家全球研究公司,萨姆剑桥,但员工驻扎在全球各地,在该领域很多。在ABT切换到响应设计Intranet之前(名为“AGI”,它代表“ABT全球Intranet”)超过一半的公司员工(在没有可靠的Internet访问的发展中国家工作)无法访问Intranet。该组织决定重新设计,以便在任何地方为员工全球协作。自从部署他们的响应设计Intranet以来,Abt Associates Intranet团队recommends responsive design to other organizations that have staff around the world。They also recommend that rendering on mobile devices be a “first thought” not an “after thought.”

代表您组织在Intranet主页上的目标和文化,用于移动和桌面

The主页是大多数内联网的高优先级页面because:

  • Most employees are exposed to it when they launch their browser.

  • 它为每个人提供了重要的内容。

  • 它充当了Intranet资源的其余资源的网关。

  • It can also direct employees to content that embodies the organization’s goals and culture.

Abt Associates的文化价值观包括思想of learning and that all employees around the world are important to the organization. The team wanted AGI to become a regular part of work life at Abt, not just a standalone resource, so the homepage had to offer staff the kind of content and functionality that would change how they work. Toward that goal, designers carefully prioritized and allocated space on the homepage to accommodate the categories of information sharing and learning, tools, and corporate information.

On the mobile homepage, designers highlighted theToday I Learned员工分享他们在全球各地的工作人员分享他们的见解,创新和成功案例的部分。设计师制作了这一点priority content when viewed on mobileby doing the following:

  • positioning it在第一个屏幕上(“折叠以上”)
  • 默认情况下显示部分中的所有内容没有任何卷轴
  • allocating it alarge proportion主页。

智能手机上的AGI主页突出显示“今天我学到了”

The entireToday I Learned部分在折叠上方的手机上出现,而无需任何滚动。

马上在下面Today I Learned部分,设计师放置了Activity Feed部分。此展示位置也支持One Global Abt学习文化在主页上。内容Activity Feed为登录的员工个性化,基于他的特定角色和位置。该部分包括ABT社交媒体职位和活动的自定义新闻源,在Intranet上,员工在AGI方面的活动以及AGI工作区的活动(专家可以共享方法并创建即时讨论),用户是一个成员。

As important as it is for employees to share information and learn directly from each other, company messaging and news are equally key. Designers positioned the新闻部分下面Activity Feed。这个可见的新闻部还强化了ABT的学习和信息共享文化。

A curated feed of need-to-know events—such as conferences and happenings—are sorted by date and link to a larger list. High-level events are featured in theABT事件新闻部分以下的区域。

下一个出现了CEO Cornersection where the President and CEO, Kathleen Flanagan, shares her personal perspectives about business, innovation and culture with staff. Stories in this section link to Flanagan’s blog and other pages.

了解您的员工的任务和设备使用情况

Abt Associates的Intranet设计师优先考虑移动主页以反映其不同用户的常见需求。设计师指出,花时间为他们在整个项目中偿还的用户彻底了解,以及他们在移动显示器中的信息的优先级得到了极大的帮助,这是通过这种理解得到帮助。

The full Abt intranet homepage viewed on a smart phone shows

移动视图中的AGI主页是一家一站式生产力,学习和有关公司信息的商店。随着一点滚动,员工可以访问他们需要的东西,彼此学习,了解正在发生的活动,获取最新的公司新闻,并从首席执行官提供的指导和角度受益。

Comparing the homepage wireframes for phone and desktop shows that more is visible above the fold on desktop, but that the key features mentioned above are in prominent, visible positions when accessed on either device.

手机上的ABT Intranet主页的线框

手机上的主页的线框演示了团队的诀窍,以优先考虑内容。

Wireframe of the Abt Intranet homepage on desktop

The wireframe of the homepage on desktop demonstrates good use of the ample screen real estate.

在全球导航中放置密钥应用程序和功能,可以快速访问它们

ABT Associates.practiced a “mobile-first” mentality, with the specific goal of servicing staff stationed around the world that access AGI via mobile devices. The mobile presentation of AGI is optimized and selective to allow for a faster page load on devices. Although the mobile implementation is lighter, employees can still access everything they want via the homepage and menus.

AGI菜单使员工随时随地随时随地进行商业交易。例如,两个菜单Menu快速链接出现在移动主页的顶部;Menutakes users to key sections of the site, including新闻,项目,Proposals,和工具和资源; while快速链接lead to timesheets, the staff directory, forms, and search. Enabling staff to easily and quickly execute employee searches or transactions like timesheets from any device is a significant business benefit provided by the mobile AGI.

两种菜单都需要轻松访问,允许员工立即到达他们需要跨越本网站的地方的灵活性。

Don’t Downgrade the Design for One Device Just to Achieve Consistency Between Devices

The topic of designing menus for aresponsive intranet是从另一个获胜组织中迈进一个例子的好时机:riptiC.是来自荷兰埃因霍温的技术娴熟的在线通信机构。晶间Intranet设计师希望确保员工可以随时随地与Intranet(名为“Iris”)进行通信和检索信息。

Triptic’s responsive intranet displays its mobile navigation in a drop-down menu, accessible via a “hamburger” icon (an icon depicting three horizontal lines.) The menu is always available but takes little space on the small viewport on smartphones. A red rectangle overlaying the menu icon displays the employee’s number of notifications (updates, reactions, posts, and mentions;) because of this helpful status display, users can get information without clicking at all.

下拉菜单内容分为主题组织的部分。这些主题与图标和较暗的灰色背景区分开来。

the menu on a smart phone is collapsed in an icon

The menu is collapsed in a “hamburger” icon, so takes up little space on the phone.

Desktops afford much more horizontal space than mobile phones, so the desktop menu is not collapsed under one icon. Rather, the topics are spread horizontally in a global-navigation bar. This flatter hierarchy displays more menu choices by default, which is why we recommend reserving a hamburger-style menu icon for mobile versions andretaining full global navigation in the desktop versionof a responsive design.

桌面上的riptic Intranet的菜单显示了第一级层次结构命令

而不是在手机和桌面上提供相同的菜单,晶圈的设计者利用桌面上的可用空间来描绘默认情况下显示更多选项的更平坦的菜单层次结构,而不是移动设备提供更多选项。

基于设备大胆安排内容

不仅是晶状体的内联网使用设备适当的导航模式, but it also调整内容以容纳不同的设备。一个例子是riptic eviciente人如何为客户的设计项目传达他们的敏捷过程信息。设计师确定使用Scrum Burndown图表时,移动用户主要在寻找更新。因此,虹膜提供了一个非常适度的图表。极简主义不仅可以轻松地将图表的内容区分开在小视图端口,而且“亮度”(较少的细节)意味着数据较少downloads faster员工。

Shows basically just the scum burdndown chart on the related page on mobile

Minimal information displays on mobile so users can get a quick update at a glance, in this example, of the scrum burndown chart for a client project.

On a tablet, employees can view a more detailed version of the chart, which includes categorizations of the hours. Menus are also expanded on tablet, and available on the right side of pages. (In general, usability is enhanced byusing a third design for tabletsbecause this platform is different than mobile phones and desktop computers.)

显示渣滓BurdNown下图表,加上平板电脑的菜单

Viewing on a tablet displays the chart, a project menu above it (circled in red in this image,) and navigation on the top and right.

The chart view on desktop is similar to the tablet one, except that the project-selection menu is expanded and visible as a list in the left rail, as opposed to a collapsed drop-down list above the chart.

显示脚本Burdndown图表,在桌面上的菜单中加上平面暴露的命令

The desktop view displays the chart, project links on the left, and navigation on the top and right.

使用个人型材页面将显示不同设备的内容和特征的优先确定内容和特征的另一个例子。员工在移动设备上看到的信息是:该人的姓名,电话号码,职称和可用性。

手机上的人员简介显示联系信息和时间表

Designers chose to skip displaying additional background information about a person in the mobile view. Instead, this design version simply directs attention to the details that most employees are looking for in the moment: whether the person is available, and what his phone number is.

在桌面员工上,还可以获得基本联系信息,而他们可以通过他们的照片,大型报价,介绍文本和社交更新来更好地了解他们的同事。

桌面上的人员配置文件显示图片,联系信息,日程表,介绍,社交功能等

通过使用其他屏幕空间,您的桌面版本的配置文件页面为基本信息加上了个体的更好的背景信息。

结论

内联网不必在响应设计竞技场后面延迟。从晶片和ABT Associates那样从诸如那些这样的大响应内网上提示,并遵循以下准则:

  1. 确定您的员工如何在移动设备上访问Intranet。
  2. Represent your organization’s goals and culture on the intranet homepage, in both mobile and desktop versions.
  3. 了解您的员工的任务和设备使用,并使用此信息以优先级功能。
  4. Place key applications and features in the global navigation where they can be quickly accessed.
  5. Don’t downgrade the design for one device just to achieve uniformity between devices. (While交叉设备一致性很重要,这并不意味着用户体验应该在任何地方相同。)
  6. Boldly arrange content based on the device.

关于这些令人印象深刻的响应设计内联网的案例研究是我们的2014年内联网设计年度
For more information about the UX decisions for responsive design attend ourScaling User Interfaces full-day training course

致谢

I would like to extend my sincere gratitude to Arthur Turksma, Jos Rouw, and Willem van Berlo at triptic; Rob Grimmett and Mary Maguire at Abt Associates; and Glen Chambers at BrightStarr for sharing their insights and additional examples of their winning intranets for this article.