news

A Guide To Simple And Painless Mobile User Testing

移动可用性测试?分享一个你绝对不知道的新招

The incredible growth of mobile and the proliferation of mobile devices has made the UX designer’s job more challenging and interesting. It also means that user-testing mobile apps and websites is an essential component of the UX toolkit.

But unlike the desktop environment, no out-of-the-box software packages such as Silverback or Camtasia are specifically designed to record mobile usability tests.

Even if you’re not developing a mobile app, chances are that a large proportion of your website traffic is coming from mobile. Running regular mobile usability tests is the only way to gauge how well this channel is working for your customers.

A bit of hacking is required. And, after years of experimentation, we think we’ve figured out the best hack available yet. If you want to test iPhone or Android experiences, this solution is simple, cost-effective and high quality.

在移动设备上进行可用性测试是大多用户体验设计团队既关注又头疼的部分,市面上的各种专业测试工具各有利弊,如何抉择是一道难题。性能好、对用户干扰少、录制质量高、能记录用户面部表情和手部操作、价格便宜等要素成为大家在选择工具与方法时重点关心的内容。本文作者Colman Walsh提供了一种讨巧的方式,能较好的解决测试中大部分问题。移动端令人难以置信的增长趋势和移动设备的全面普及,让用户体验设计师的工作更具挑战性与趣味性。这意味着移动应用与移动站点的用户测试成为用户体验工具中的重要一环。与桌面环境有所区别的是,移动端可用性测试缺少像Silverback或Camtasia这样开箱即用的软件记录工具。即使不开发一款移动应用,你的网站大部分流量也可能来自于移动设备。执行常规的移动可用性测试,便成为衡量该渠道是否正常工作的唯一途径。此时需要一定的动手能力,经过多年实验,我们认为已经找到了最理想的手段。如果你想简单测试iPhone 或Android 的体验,这套方法不仅简单,性价比高,而且效果出色。

The Old Hack: Wires And Duct Tape

In days gone by, we used a “sled” to mount a smartphone and camera into a position where we could record what users were doing on screen. (To create the sled, we bought some acrylic in a hardware store and bent it into shape over a toaster. Fun.)

We attached a webcam to the sled with duct tape and mounted the phone with tape and some velcro strips. Looking back, the device was pretty crude. It wasn’t a natural experience for users, who would often cradle the phone in two hands to keep the sled steady.

旧法:线缆加胶带

过去我们使用“雪橇”将智能手机与摄像头固定在某个位置,从而方便我们记录用户在屏幕上的行为。(要制作一个雪橇,我们在五金店买了一些丙烯酸通过烤面包机将其弯曲成型,非常有趣)

我们将摄像头用胶带粘贴在雪橇上,并且把手机用胶带和尼龙搭扣装好。回头看来,这种做法还是很简陋的。用户不得不经常用两只手托稳手机以保持雪橇稳定,当然也谈不上自然体验。

Smartphone on a sled
A user with smartphone and camera mounted on a sled.

Technically, it wasn’t reliable. Because we were using two cameras on one laptop (the camera on the sled and the laptop’s built-in camera), we had to have two camera apps open at the same time. This led to flaky performance. Either setting it up would be a stressful time or we’d get a blackout in the middle of a test — or, often, both.

And there were other issues, such as screen glare and camera focus. Overall, it was time-consuming to set up, with unreliable performance and a suboptimal testing environment. It was particularly stressful if clients were around, but it was the best solution we knew at the time.

从技术上说它是不可靠的。由于使用了一台笔记本的双摄像头(雪橇上的摄像头和笔记本内置摄像头),我们不得不同时开启两个摄像应用,这导致了一定性能问题。要么在设置中造成内存紧张,要么在测试中摄像头熄灭,往往两者兼而有之。

还有其它一系列问题,比如屏幕炫光和摄像头失焦。总得说来,设置测试环境非常耗时,而且性能不可靠,测试环境并非最优。尤其是客户在身边时,压力尤其大,但这也是那时我们能做到最好的情况。

A Better Way: Wireless

Ideally, testing equipment and software should be invisible to the users. We want as natural an environment as possible, just the users and their smartphones — no wires, sleds, cameras or duct tape.

For the UX team, the focus should be on learning and insight. We don’t want to be sweating over the setup or worrying about blackouts.

I’d like to introduce you to a simple setup that achieves all of these goals. It allows the UX team to focus on what really matters, and lets users focus on their phones. And it’s so reliable that we regularly use it in front of clients and during our training classes.

We’ll focus here on testing usability on smartphones, using a MacBook as the recording device. But the approach works with Windows PCs, too.

新招(当然更好):无线

理想情况下,用户应该无法看到测试环境与软件。我们希望创造尽可能自然的测试环境,只有用户与智能手机,没有线缆、雪橇、摄像头或胶带等干扰。

对于用户体验团队来说,在用户测试中不断学习和洞察才是关键。我们不希望一直为设置测试环境或者摄像头熄灭而费心。

我希望通过介绍一个简单的设置来达成这些目标,它帮助用户体验团队专注于真正重要的事情,让用户专注于他们的手机。因为它非常可靠,所以我们经常在培训课程中面对客户使用。

接下来重点谈智能手机的可用性测试,我们使用一台MacBook作为记录设备。当然,这种方法也适用于Windows PC。

Wireless testing is more natural
Wireless testing is more natural.

STEP 1: INSTALL SOFTWARE

The magic ingredient in this setup is Apple’s wireless AirPlay technology. This is the software that lets you stream music or videos wirelessly to an Apple TV.

So, the first software you’ll need to buy (for $15) and install is Reflector, which converts your laptop into an AirPlay receiver, just like an Apple TV. This allows us to mirror the user’s smartphone screen onto the laptop: Whatever is on the user’s smartphone will also be seen on the laptop.

Now we have a scenario in which we don’t need an external camera to record the user’s smartphone screen. We just need screen-capturing software to record the smartphone on the laptop. My personal favorite is ScreenFlow($99), for two reasons. It’s reliable, and it uses the laptop’s camera to record the user’s face during the session, an essential component of any usability test.

STEP 2: SET UP MONITOR

This step is optional, but I like to use an external display so that the facilitator and notetaker don’t have to peer over the user’s shoulder to see the action. It also minimizes distraction for the user; they won’t see a giant version of their smartphone on the laptop in front of them — it will be on the monitor instead.

So, run an extension cable from your MacBook to the monitor. If the monitor and the laptop are showing the exact same thing, that means they’re being mirrored, which we don’t want. Open up “System Preferences” and select “Displays,” and make sure the box for “Mirror Displays” is unchecked.

第一步:安装软件

产生神奇效果的关键在于Apple的AirPlay无线技术,该软件能让你把流媒体(音乐、视频)通过无线的方式传送到Apple TV上。

因此,首先你需要购买并安装一个叫做Reflector(大概15刀)的软件,它能将笔记本变成一个AirPlay信号接收器,像Apple TV一样。这样一来,我们能够把用户智能手机屏幕以镜像的方式投射到笔记本电脑上,用户屏幕上的内容将在笔记本屏幕上同步出现。

现在我们可以不需要额外摄像头来录制用户屏幕了,只需要在笔记本电脑上通过屏幕录制软件进行录制即可。强烈推荐ScreenFlow(大概99刀),不但可靠性高,并且在测试环节中能通过笔记本电脑摄像头捕获用户面部内容,这是任何可用性测试的重要组成部分。

第二步:设置显示器

这一步是可选的。因为我倾向于使用外接显示器,使主持人和记录员不必同时瞥过用户肩膀来观察行为。这样也能将用户干扰降至最低,用户不会看见面前笔记本电脑屏幕上的巨大手机屏幕投射,它会出现在外接显示器上。

所以,为你的MacBook连上外部显示器,如果外接显示器与笔记本屏幕显示一致内容,意味着这不是我们希望设置的镜像模式。打开“系统偏好-显示”,将“镜像显示”去掉勾选。

The correct display preferences for your Mac
The correct display preferences for your Mac.

STEP 3: SET UP REFLECTOR

To start beaming the smartphone to the laptop, open Reflector on your Mac. You’ll see the Reflector icon in the toolbar in the top left of your screen.

第三步:设置Reflector

要将智能手机内容发送到笔记本电脑屏幕上,只需打开Reflector,在笔记本电脑屏幕左上角的工具栏上可以看到它的图标。

You'll see this icon when Reflector is open
You’ll see this icon when Reflector is open.

STEP 4: MIRROR YOUR SMARTPHONE

Now we come to the magic part. If you’re using an iPhone, swipe up from the bottom of the screen, and enable AirPlay. Then select your MacBook from the list (in this example, it’s “Colman’s MacBook Pro”). Finally, flick the “Mirroring” switch to active (green).

第四步:对智能手机进行镜像

现在就是见证奇迹的时刻!如果你使用的是iPhone,从屏幕底部上划,启动AirPlay。然后从列表中选择你的MacBook,再打开镜像按钮。

Turning on mirroring on your iPhone
Turning on mirroring on your iPhone.

Your iPhone should now appear in the middle of your external monitor. Magic! (If the iPhone appears on your MacBook’s screen, just drag it onto the external monitor.)

For devices with Android 4.4.2 or higher, swipe down from the top of your screen to access the settings. Select the “Cast screen” option, and then select your MacBook.

Note: Your smartphone and MacBook need to be on the same Wi-Fi network for any of this to work. It’s the first thing to do when troubleshooting if you can’t get it to work right away.

你的iPhone应该出现在外接显示器的中间,是不是很神奇!(要是iPhone出现在MacBook屏幕中,只要把它拖拽到外接显示器上即可)

使用Android 4.4.2或更高版本设备的,从屏幕顶部向下划动进入设置,选择“投射屏幕”选项,然后选择你的MacBook。

注意:你的智能手机和MacBook必须保持在同一Wi-Fi网络中,要是出现问题,这是故障排除首先进行的事情。

STEP 5: SET UP SCREENFLOW

To start recording, open ScreenFlow; the new recording configuration box will appear. You’ll need to adjust the following three settings:

开始录制前,打开ScreenFlow。初始设置对话框弹出,你需要做如下设置:

Setting up ScreenFlow
Setting up ScreenFlow.
  • “Record desktop from”
    Check this and make sure to select the external monitor from the dropdown menu (“2270W” in the example below).
  • “Record video from”
    Check this and select “FaceTime HD Camera (Built-in),” which is the default option.
  • “Record audio from”
    Check this and select “Built-in microphone.”

1、“录制桌面来源”

选中并确保从下拉菜单中选择你的外接显示器。(参照示例中的2270W)

2、“录制视频来源”

选中并确保选择默认选项“FaceTime高清摄像头(内置)”。

3、“录制音频来源”

选中并选择“内置麦克风”。

STEP 6: START RECORDING THE TEST

Position the user directly in front of the MacBook. You should see their face in the ScreenFlow preview. Then, press the large red record button. That’s it — you are now recording.

As you and the notetaker are watching the action on the monitor, the user will be sitting in front of a blank laptop, using their smartphone as they normally would — no wires, duct tape, cameras or intrusive mounts.

In the screenshot below, I’m playing around with Spotify on my iPhone. You can see that, as well as capturing the smartphone’s screen, ScreenFlow also provides a picture-in-picture display of the user, perfect for usability testing.

第六步:开始录制测试内容

让用户处于MacBook正前方,这样你能在ScreenFlow的预览中看到他们的面部。然后按下红色录制按钮,搞定,现在已经开始录制了。

当你与记录员在外接显示器上观察用户行为时,用户正端坐在空白的笔记本电脑前,像往常一样使用手机,没有线缆、胶带、摄像头或者其它干扰。

在以下截图中,我在iPhone上把玩Spotify。你能看到,在录制手机屏幕的同时,ScreenFlow提供了画中画窗口来显示用户面部表情,完美的可用性测试。

TA screenshot of the recording output of ScreenFlow
A screenshot of the recording output of ScreenFlow.

Granted, the recording won’t show the user’s fingers interacting with the device. But the overall benefits of this technique are so numerous (see the list below) that the trade-off is justifiable.

当然,这种方式依旧不能展示用户的手指与设备互动的过程。但总体说来,它的优点还是很多(见结论中的列表),算是一个无可非议的好方法。

 

OVERVIEW OF SETUP

To be clear, let’s review what your setup should look like. The user should be sitting in front of the MacBook, with the smartphone in their hand. And the facilitator and notetaker (if you have one) should be sitting nearby, looking at the external monitor.

设置总览

需要明确的是,让我们回顾下设置的全貌。用户应该坐在MacBook面前,使用自己的手机,主持人和记录员应该坐在附近,通过外部显示器观察用户行为。

Room setup
How the room and screens should be set up for the test.

Keep the monitor pointed away from the user. It can get distracting seeing their smartphone flashing on the big screen.

使外接显示器正面远离用户视线,否则大屏幕上的手机屏幕影像会干扰用户的注意力。

Conclusion

There are so many advantages to this approach that it would be worth listing them:

  • Simple
    After your first time getting things together, setup takes about five minutes the second time.
  • Reliable
    It’s not perfect, but crashes and setup issues are rare. With the sled-and-camera approach, however, problems were par for the course.
  • Cost-effective
    You can have this solution in place for less than $200 if you’re using a MacBook. (By comparison, Morae, the high-end usability testing software, sells for $2,000.)
  • Professional
    The output is high-quality and professional. It doesn’t look like a hack. We’ve shared our recordings with clients, executives, everybody.
  • Flexible
    The solution works with the major platforms: PC, Mac, Android and iOS.
  • Convenient
    Finally, because you don’t need any duct tape or velcro, test participants can use their own phones. This makes your tests even more natural and effective.

结论

我们介绍的这种方法有诸多优点值得一试:

1、简单

首次将所有环节调试完毕之后,接下来每次只需要花费5分钟左右来设置。

2、可靠

它并不完美,但软件崩溃和设置问题出现的几率很低。然而,雪橇+摄像头的方案出现问题则是意料之中的事。

3、性价比高

假如你使用MacBook,整个解决方案只需花费不到200刀。(与之对应,专业高端的可用性测试软件Morae售价2000刀)

4、专业

高质量并专业的输出,看上去不像是黑客技术。我们把录制的内容与参与的客户、高管们分享,效果很好。

5、灵活

这种方案适用于主流平台:PC、Mac、Android和iOS。

6、方便

因为不需要任何胶带或者尼龙搭扣,测试者还能使用自己的手机,这让你的测试更加自然有效。

read more
hanna baiA Guide To Simple And Painless Mobile User Testing

Adobe launches Experience Design CC, a new tool for UX designers

ADOBE XD CC有哪些高效好用的小功能?

今天来聊聊这个软件,快速排版、快速交互、批量填充图片……等等,每个小功能都有动态图演示,一看就懂,来收!

它是快速交互工具,方便快速的排版操作,能给来不及干活的你分分钟出套界面or原型。

启动界面上面具备了N个默认尺寸,我们可以快速创建符合设备的界面尺寸。

具备一些简单高效的小功能,比如我们的圆方切换与AI类似 。

 

Experience Design CC is the company’s first tool that is purpose-built for user experience (UX) designers. It takes what Adobe has learned from working with UX designers who currently use its tools like Illustrator, Photoshop and others and distills it into a single product that aims to make designers more productive.

As Andrew Shorten, Adobe’s director of product management for Experience Design CC, told me, the company started this project about 18 months ago. “We began to see challenges with combining established tools like Photoshop,” he said, and noted how the company’s research found lots of gaps in the standard workflow for UX designers. Specifically, the fact that they often had to use multiple tools that didn’t necessarily talk to each other meant that every time designers wanted to change something in their mockups, they had to go back and change it manually (and maybe numerous times to account for different screen sizes).

6jy20160319

因为是产品相关的软件,自然是会具备一些很吊的排版功能,对设计师而言也是一个很好的功能,不用再一条一条的去搞了~

我们来看看这个快速拼板的功能。

With this new tool, designers can quickly change back and forth between the artboards designers create in the “design” mode and the prototype mode.

Any changes they make in the design mode (an updated icon, text, etc.) are automatically reflected in the prototype mode, which makes it easy to define interactive hotspots and transitions that make a mockup come to life. Say you want a “read more” button on a mobile homepage to connect to an article; all you have to do is define the hotspot and drag a line to the mockup of the article page.

5jy20160319

还能批量调整间距,这个也很实用~

The design mode features a number of basic drawing and text editing tools, but the main focus is obviously on laying out the different elements of a given page.

To help designers get started, Adobe added UI kits with the standard widgets for designing apps in iOS and Windows, as well as for apps that follow Google’s Material Design guidelines.

4jy20160319

也可以拖入图片,批量填充我们需要填充图片的地方。

A feature that will likely save designers more time than any other in Experience Design CC is probably the “repeat grid tool.” With this, you can define an area on the page (maybe a post on the homepage) and repeat it a couple of times down the page. Typically, this would involve lots of copying and pasting, but with this new tool it only takes a few clicks.

One feature the team hasn’t built into the tool yet, though, is support for responsive designs, but Shorten tells me that’s on the roadmap.

As Shorten stressed, the team also focused on making it very easy to share artboards and prototypes with others. Uploading a prototype to the web takes a single click. The tool then gives you a link you can share with others. And if this is a mobile app, you can also easily use this to try a new design on a phone or tablet, too.

3jy20160319

可以实现快速交互,将我们有关联的界面和元素做上交互。

The preview of Adobe Experience Design CC is now available for free to anybody with an Adobe account (even if you are not a paying Creative Cloud user). In a somewhat unusual move, though, the team decided to only make this first preview available for OS X users. Shorten tells me a Windows version is in the works.

 

2jy20160319

可以预览,直接操作演示,也可以分享连接地址,直接在多平台查看。

For now, the new tool doesn’t integrate other Adobe services like CC libraries and Adobe Stock, but that’s coming soon. Also coming soon, designers will be able to immediately preview their edits on connected mobile devices.

Adobe promises a monthly update cadence, so chances are the company will add these missing features pretty soon. Adobe’s annual MAX conference is scheduled for early November; I’d wager a guess that we’ll see the general availability of Experience Design CC then.

1jy20160319

废话不多说,自己下了玩玩看吧。

read more
hanna baiAdobe launches Experience Design CC, a new tool for UX designers

“Craft” New amazing plugin for Sketch and Photoshop

 

 

6mt20160212

 

Today, InVision is introducing Craft, a suite of three new plugins for Sketch and Photoshop to held developers and designers with their UI mockups.

The three plugins Type, Photos and Duplicate work in unison, but command three unique tenets of the design process.

Type automatically populates your design from a database of names, email addresses, countries, cities, zip codes or other identifiable information. It helps create a contextually relevant design, which adds a personalized touch if you’re doing freelance work for a client.

Photos lets you add images from your computer, Dropbox or Unsplash with one click. If you’ve got some stock images saved for wire framing apps or websites, Photos makes short work of adding them.

Finally, Duplicate lets you copy any element for a new template. It captures the design with “pixel-perfect precision,” which you can use as many times as you need.

• Styles, which exists within the new Craft Manager, creates a new page within Sketch with the project’s color palette, fonts, and text styles.

• Users can also include a host of custom elements, like buttons, symbols, and more.

• The Styles-generated guide syncs to projects, so when designers make a change to the guide, the change applies across the entire project.

  • Styles is exclusively for Sketch users. Craft is 100% free. When users update or download Craft, they will get Styles and the new Craft Manager too.


Craft有什么牛逼的功能?

因为米田用的Sketch为主,所以内容也是以此为主。Photoshop的功能是完全一致的,就不再重复演示了。

文本自动填充

简单一句话,能填充很多英文类字符串。包括姓名,大标题,文章,日期,电邮,城市,地址,国家,货币等等都可以。不过这块因为不是英文,还是显得有点鸡肋。

5mt20160212那怎么办?

还有记得那个标签栏有个”web”的选项么?点一下它,输入你认为可能能找到对应东西的网站。具体如下图,只要框选的内容就会被自动填充了。
这个功能太实用了,泪流满面。终于不用来回切换程序了。

4mt20160212具体动画演示,请看下图:

9mt20160212图片自动填充

我们可以从Dropbox的,电脑文件夹或网络导入真实不重复的照片,到设计的界面里。

craft插件可以将真实图像快速添加到界面。并且提供足够多的添加选择方式。

1)从Unsplash随机添加图像。

2)从自己的文件夹,甚至是图像中抓取的图像。

3)从任何网站添加图像,方式和文本填充方式一致。(注意图像使用版权)

7mt20160212▲ Cratf图像填充演示——Unsplash填充

8mt20160212▲ Cratf图像填充演示——从任一网页填充

重复元素自动变化填充

这是Craft插件最吸引人的地方,真正的方便和节省时间的功能。以往我们要复制元素,还要考虑份数和间距等等问题,最简单的方式也只是“Alt +拖动”,当然有部分插件能实现快速复制。

但是Craft的复制功能的最大好处是,它会自动完成上述所有的功能外,还自动替换图像和文本。完全不需要手动处理,就能实现完全的高保真界面。 真的太酷了!

下面就是见证奇迹的时刻。

10mt20160212

Craft的安装步骤:

1)下载安装包,解压缩

根据自己是Win或Mac系统点击对应的文件(如下图)。如果你用的是Sketch就点击Sketch,如果是Photoshop也是同理。当然两个都点击都可以。

3mt201602122)打开Sketch或Photoshop,看看是否安装成功

打开Sketch,会发现出现新的面板,表示已经成功安装插件。

2mt20160212打开Photoshop,在窗口>扩展功能>Duplicate/Photo/Type出现,表示已经成功安装插件。

1mt20160212

Craft的快捷键

它最大的用处就是填充照片,文本虽然也可以填充,但是基本是英文的文本,用处不是特别大。

  • 神功能A:插入文件夹的图品(最牛逼的功能): Shift + Ctrl +1
  • 神功能B:随机从Unsplash插入图片(Unsplash是质量很好的壁纸库) Shift + Ctrl + 3
  • 神功能C:从Drapbox插入图片(因为国内被墙,用处没有那么大了) Shift + Ctrl + 2

For download Craft please visit:
http://labs.invisionapp.com/craft

Special thanks to: 米田miten

read more
hanna bai“Craft” New amazing plugin for Sketch and Photoshop
img-7-1200x600.png

This theme is so nice!

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don’t know exactly when we turned on each other, but I know that seven of us survived the slide… and only five made it out. Now we took an oath, that I’m breaking now. We said we’d say it was the snow that killed the other two, but it wasn’t. Nature is lethal but it doesn’t hold a candle to man.

read more
dev01This theme is so nice!

Donec accumsan commodo vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sit amet dolor ac sapien elementum dignissim sed at purus. Phasellus imperdiet non arcu in pulvinar. Aliquam sit amet justo vel purus eleifend consequat vitae nec felis. Vestibulum pretium, est ut mattis aliquam, lorem nisi semper augue, in malesuada est velit eu mauris.

Quote Post
Irene ZhengQuote Post
img-1-1200x600.png

It is so cheap!

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that’s what you see at a toy store. And you must think you’re in a toy store, because you’re here shopping for an infant named Jeb.

read more
dev01It is so cheap!

Cras aliquet felis in magna accumsan, sit amet mattis arcu auctor. Nunc sollicitudin auctor adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lacus ante, egestas id pellentesque vel, tempus at justo.

Quote Post
Irene ZhengQuote Post