iOS 7 Experience Design Concept

Overall iOS 7 Concept

As evidenced with both Google Now and the Windows Phone experience, today’s mobile technology is quickly moving beyond providing access to applications. Mobile devices are increasingly surfacing information valuable to the user in a highly contextual and personalized way.

As a result, it’s been widely reported and discussed that iOS is starting to feel “outdated,” largely because the current iOS experience is centralized around access to applications, and not information within those applications. Turn on your iPhone, and you’re greeted with a screen of individual applications. Open up an application, and your experience is centered solely around that application. Receive a notification, and dig through a list of notifications grouped by apps and not by relevance or importance. Close an application, and move on to the next one, one by one.

My concept centered around the idea that iOS 7 needs to take what iOS is best known for, its apps, and mold the experience around getting to information those applications provide quickly and easily. Apple also needs to give the user more control over their mobile experience. Changing the visual aesthetic to flat design, as rumored, is not enough to really evolve the experience.

Caveats

To get this out of the way, I will completely admit that I was inspired by Google Now and the overall Windows Phone experience. With just a few days to pull together an iOS 7 concept, I felt it best to look at how elements that make those experiences useful could be leveraged effectively within iOS. I don’t see this as “copying” per se, rather taking what works well and figuring out how to adapt that within a unique operating system. This concept is also intended more as a conversation starter rather than a comprehensive redesign.

Home Screen

Home Screen

Expanded Tiles

Home Screen Tiles

My revised home screen experience uses tiles of information intelligently grouped by context, providing relevant and timely notifications (e.g. My Morning Routine, My Upcoming Commute, My Evening Plans, Recent Social Activity, etc.). There are some key differences between this and Google Now. Google Now revolves around Google services or services that Google can control. Apple’s home screen could serve as a platform for applications to deliver contextual content, and users can control what they want to see when. This isn’t just about presenting a subset of data accessible within an application, but rather forming the home screen experience around relevant information, regardless of the application it’s coming from. 

In the spirit of deeper customization, such a home screen could also be customized to provide a display of semi-permanent items coming from app services. I find the concept of a “widget” too limiting in this context. Widgets live in isolation, much like their full app counterparts. Alternatively, iOS could explore ways of allowing the user to seamlessly move data between app services and interact multiple app services at a time.

Apps Screen

Apps Screen

Apps Categories

Today’s iOS home screen limits the number of apps per screen and within folders. The user is left to manually organize each screen of their device, which can get difficult and confusing if the user has a significant number of apps. My revised apps screen provides more flexibility around organizing apps. Each screen represents a category of apps, and apps can be assigned to one or more categories. By default, apps can be assigned to the category they lie within in the App Store, but apps can be moved to custom categories. Users can quickly navigate between categories by swiping sideways, or view all apps within a category by scrolling vertically. This approach maintains the overall feel that iOS users are accustomed to, but introduces more structure and organization necessary for users who have a lot of apps.

Additional iOS Possibilities

These ideas are just a hypothetical look at what Apple could bring to the iOS 7 experience. One thing is clear, though. Acting as a springboard for applications isn’t going to be enough to engage iOS users for much longer. Apple has all of the pieces in place for a more intelligent system (iCloud, Siri, and the largest developer community). It will just need to figure out how these pieces can work more effectively together to bring a unique and useful experience to its users.

As an example of the experience gap between many browser-based web experiences that haven’t been optimized for tablet use and native applications on tablet devices, let’s take a look at the A&E TV web vs. iPad experience to determine which experience better facilitates user tasks on a tablet device. For those not familiar with A&E, it is a United States-based cable and satellite television channel with the tagline: “Real Life. Drama.”

While research should be done to validate A&E’s users’ needs, let’s assume that A&E’s digital content is likely frequently accessed by people sitting on their couches in front of a TV. These users likely want to find out more information about the shows, catch up on shows they missed, and find out when they are on. Under these general assumptions, does the A&E website or native tablet app deliver a more usable and enjoyable experience?

The A&E Web vs. App Experience

• Focus: The application’s initial screen focuses on featured shows of interest in a way that is very scannable. The screen invites exploration without coming across as overwhelming. The initial web homepage experience, in contrast, features only 3 shows in a distracting rotating header space and then fills the page with some scheduling information, video content, web exclusives, top shows, and callouts to other sections of the site (not to mention plenty of adverstising). The web homepage distracts from the core user tasks, whereas the focus of the native application makes the core information immediately apparent.
• Navigation paths: The native application focuses on content of most interest to its users: featured shows, all shows, and recently added content. These paths are large and easily accessible. The web experience uses a heavy navigation schema that doesn’t make the key paths immediately obvious. Secondary navigation is difficult to select, as it hasn’t been optimized for touch input, and some of the sections even direct the user to content not available on tablet devices.
• Actions: A&E’s native application makes key actions accessible at all times including viewing the schedule, adding an item to a watch list, and search. Additionally, actions that are contextual to individual content items are prominently displayed consistently across the experience. In contrast, actions on the website are more difficult to find and are spread out more inconsistently throughout the experience.
• Information views: The A&E app progressively reveals content instead of relying on full page transitions to view show information or to preview videos prior to watching. This helps to simplify the experience by progressively revealing information as needed. On the website, pages are more content-heavy and full page refreshes are required to access much of the content.
• Transitions and animations: The native application uses subtle transitions and animations to enhance the overall feel of the experience. Tiles with featured shows flip into view, a small “+” sign animates when shows are added to the wish list, and subtle animations are used within the channel schedule. In contrast, the website feels like a more flat and static experience with the absence of subtle animations. Full-page transitions and refreshes make the web experience feel more linear and less immersive as compared to the native app.

One may argue that A&E’s native app purposefully only focuses on a subset of the content available on the web. The app is more media-centric, choosing to focus on video over other content. However, A&E’s audience likely has fairly consistent content needs across the web and native experience when using a tablet device. Through research, A&E may be able to determine how to better present their web content in a way that doesn’t take away the full breadth of content but rather better prioritizes content that is most important to their users.

By presenting the user with a desktop-oriented experience on their tablet browser that hasn’t been optimized for tablet use, A&E may be losing an opportunity to engage users who attempt to interact with the company’s content in a browser. But by aiming to optimize their website for tablet use, A&E may be able to evolve their web experience to better suit users on both desktops and tablets.

“Download Our App!” Disrupts the Web User Experience

A&E Download App Popup

A&E must have some awareness that their native application delivers an overall better experience on tablets, as they employ a disruptive popup upon the user’s initial visit that tries to direct you over to download the application. This technique is a clutch that doesn’t recognize that users are accessing the content through a browser for a reason, and desire to engage with content without needing to download an app. Prompting users to download an application can be a very disrupting experience that could end up preventing users from accessing any of the company’s content.

There is currently a divide between browser-based web experiences that are optimized for tablet use and those that present existing desktop web experiences (perhaps with slight optimizations or none at all). Organizations frequently struggle with how to optimize tablet experiences, as the desktop experience can often be seen as “good enough,” particularly given the additional cost of optimizing web experiences for tablets. However, there are lessons from native application design that can be leveraged on the mobile web that can result in deeper user engagement outside of the native application approach.

Trip Advisor’s Native Tablet App and Web Experience

The “Feel” of the Native Tablet App Experience

Many people describe native applications as beeing “smoother”, “more polished”, and “more engaging” than their mobile web counterparts. The reason for this overall impression is due to a wide variety of factors, but it’s important to realize that the “smoother” feel is not universal and need not be unique to native applications. Frequently, the reason for the better overall feel of native applications is a result of good design mixed with a good technical implementation, neither of which need to be exclusive to native applications.

Top Characteristics of Good Native Tablet App Design:

The following characteristics of good native tablet app design can be used as inspiration to improve the tablet web experience and to make interactions in the browser feel more natural and engaging on a tablet device.

• Focus as a design principle: The best tablet applications focus each screen on a core user task or core piece of content to consume. Distractions that may take away from that core element are removed in order to simplify the experience and to make the best use of the device’s form factor. Interactivity and progressively revealing content is prioritized over adding too many features to any one screen.
• Clean and simplified navigation paths: Tablet applications typically employ navigation techniques that keep navigation easy to find when needed without distracting from the rest of the experience. Additionally, navigation hierarchy is typically flattened to avoid having to access too many screens in order to access desired content. By getting users where they want to go quickly, tablet navigation doesn’t take up an overwhelming amount of prominence in the experience.
• Persistent and contextual actions: Tablet applications frequently make use of toolbars that place commonly used actions within easy reach. Additionally, actions related to a particular piece of content are placed in close proximity to that item in a way that indicates how it can be used or manipulated. When each screen is focused only on the necessary content, contextual actions become easier to find.
• Information views in lieu of full-screen transitions: Instead of transitioning a complete screen following a selection, many tablet applications aim to only manipulate the content piece or area that changes. For example, popovers and modal windows can be used to display contextual information instead of displaying that information in an entirely new screen. This helps users keep track of where they are in the experience, and helps to reduce the amount of navigation steps needed to move between content.
• Use of transitions and animations to provide feedback: Subtle animations and transitions can help make tablet experiences feel interesting and engaging and can help to provide feedback when users complete an action. When animations are used following an action, it enhances the user’s sense of directly manipulating objects on the screen. This sense of manipulation is one of the key aspects that currently distinguishes native applications from many mobile web experiences.
• Use of gestures to enhance the experience: Incorporating simple standard gestures into an experience can enhance the overall interactivity of a tablet experience. Instead of progressing through an experience through a series of taps, gestures can serve as shortcuts to interact with content elements. Gestures need to be used appropriately and with proper affordances to ensure they are easy to discover and remember.

Web experiences on tablets don’t need to copy all of the design choices made in native applications simply to obtain an “app-like” look and feel. In fact doing so could make maintaining a cross channel experience more difficult. However, there are elements of native app experiences that can be employed in different ways to optimize the browser experience on tablet devices.

Technical Aspects That Can Impact the Tablet Experience

Responsiveness and Overall Performance:

Frequently, but not universally, native applications respond more quickly to user inputs and can retrieve data more quickly than their web counterparts. This responsiveness is an important element of the overall user experience. A common user complaint of the web experience on tablets is that websites or web apps are too slow or too “clunky” from a performance standpoint. However, it’s a myth to assume that mobile web experiences by default are going to be slow and not very responsive to user inputs.

As Tim Kadlec explains, blame the implementation, not the techique. If web experiences are built with performance at their core, web experiences can start to approach the same level of performance that many native applications have achieved.

That said, there’s still going to be an element of performance and interactivity that native applications can accomplish that current browser-based technologies such as HTML5 haven’t quite caught up with yet. For that reason, it’s important to implement interactivity that’s going to be successful from a performance standpoint and isn’t just introduced in order to make a website appear to be more like a native app.

There’s Still a Place for Native Apps

While many of the design principles used to make native app experiences useful and engaging can also be leveraged within the browser, there are still plenty of scenarios where a native app can result in a better experience for your users. However, prior to investing in developing a native app experience for your users, you may want to consider optimizing the tablet browser web experience to ensure that you’re meeting the immediate needs of your users where they’re most likely to begin engaging with your content. Native apps can then be developed to support functionality that goes above and beyond what’s available in the browser to deliver an optimal total experience for your users.

1. an acquired behavior pattern regularly followed until it has become almost involuntary

In the book The Power of Habit, author Charles Duhigg explains how habits are formed and what it takes to break an ingrained habit. The book references a 2006 study from Duke University that found that 40% of the actions that people perform each day are habits, not purposeful decisions. Habits impact our daily lives in many different ways, even in how we interact with websites and applications. Being aware of how habits may influence interactions users have with your products can help you design better user experiences.

The Habit Loop

Duhigg breaks down how habits are formed into a very simple habit loop:

1. A cue triggers your brain to respond in a certain way
2. You respond by doing a routine or action, which could be physical, mental, or emotional
3. A reward is given for doing the routine, telling your brain that the habit is worth repeating in the future

Digital Experience Habits

As users use a website or application repeatedly, they’re likely to start developing habits. Cues cause users to look to the same place repeatedly in order to access information or complete a task. If the user consistently repeats a behavior, it becomes almost automatic the next time they’re looking to perform the same action.

Users who frequently reference the same information within an online experience will usually learn the path that they need to take to access the content. They may focus more on where they remember these links to be on a page or screen rather than actively focusing on the logical pathways to get to the content. Think about an experienced cashier entering an order at a fast food restaurant. In order to be efficient, they’re likely to develop habits and rely on memory of where items are on the screen rather than focus on the actual content on the screen.

As another example, consider the account login experience for most websites and applications. If visibility and placement of an account login remains consistent, registered users may start to automatically access the login while ignoring everything else. Every time the user successfully logs in and gets to the information they were seeking (the “reward”), this habit is reinforced.

How to Identify Your Users’ Habits

• Conduct usability tests or contextual observation studies with existing users – Ask users to show you how they currently complete tasks or find information. Make note of the times when they habitually click on navigation elements or calls to action vs. when they exhibit browsing or searching behaviors to find what they’re looking for. This can help you identify the cues and routines that impact user behavior for common tasks.
• Review analytics – Review your analytics to identify the most common navigation paths that users follow to get to the top visited content. Try to identify if these paths remain consistent over time. While not a definite indication of habitual behavior, consistent activity trends can give you insight into whether users are typically accessing information in the same way over time.

Redesigns Can Disrupt User Habits

Repeat visitors learn over time where to go to access content, and these behaviors can become habits.

If content is moved, deleted, or modified in any way, it can be disorienting and frustrating for users who expect to find the content (the reward) based on their previous behaviors. Major redesigns can be especially disruptive to the user experience, even if the change is for the better. Recognize that a new interface may cause users to become disoriented and confused even for the most basic tasks. Users will need to change their habits in order to complete their old tasks.

Read more about the impact that big redesigns can have in Jared Spool’s article
Extraordinarily Radical Redesign Strategies.

How to Change User Habits

Duhigg identifies a relatively simple process for how to modify habits:

1. Identify the cue that triggers the routine and the reward that the habit brings
2. Actively replace the original routine associated with a cue and reward with a new routine

When it comes to digital experiences, this is easier said than done, as users can quickly get impatient and frustrated if they have to change their routines. You have a few options to try and reduce the impact of change and to help guide your users to replace their old routines with new routines:

• Make change slow and incremental – Reduce the impact of change by only changing small things at any one time.
• Monitor analytics to determine impact of changes – The benefit of incremental change is that you’re in a better position to react quickly if your changes are having a negative impact. Monitor analytics to see if the new routines your asking from your users are harming key success metrics.
• Use brief tutorials to introduce new routines – While relying on help content to explain changes is less than ideal, when done in a brief and non-obtrusive way, it can be an effective way of reducing confusion around change.
• Make sure new routines result in the same reward – Make the reward clear before asking a user to do something new. Changing both the routine and the reward can be even more disruptive than only asking a user to modify their routine.
• Don’t be different just to be different – Make smart changes, and provide unique value in a way that gives the user a reason to change their habits. Try to only break user habits when you have something that’s going to result in a better user experience or will help improve your success metrics.

In parts 1 and 2 of the “Mind Mapping for UX Design” series, I discussed applying mind mapping to sketch mapping and research mapping. Mind maps can also be used to help you wrap your head around the content strategy needs for a product or service and to make those activities more tangible, organized, and structured.

In almost all cases, a mind map alone won’t be sufficient for completing many elements of content strategy (e.g. content audits, governance plans, metadata and taxonomy definitions, etc.). However, mapping out the high-level elements of content strategy can help ensure that the elements of your strategy are aligned and can help serve as a reference point when compiling the various aspects into a comprehensive strategy.

Content Strategy Map Example
Download the full-sized map (PDF)

What are content strategy maps?

Content strategy maps outline content strategy activities and deliverables along with the top components that make up those activities. These maps can serve multiple purposes:

• Generate a list of the content strategy activities that you will be conducting
• Document the primary outputs of content strategy activities
• Create a framework for identifying relationships between content elements (for example, how voice and tone can be used to support the content’s purpose)
• Help reflect the scale and scope of a content strategy effort, helping to plan and resource activities effectively
• Create a visual reference of the most important elements of your content strategy for reference throughout a project

Elements of a content strategy map

Content strategy maps can contain a wide variety of elements depending on what is needed for a given initiative. Focus on selecting the elements that will bring you the most value and that will help you structure your activities and outputs.

1. Content strategy activities – Map out the elements you will need to investigate and focus on during content strategy activities such as content inventory, gap analysis, content assessment and evaluation, content presentation strategy, metadata strategy, governance planning, etc. Identify what you already have and what still needs to be done.
2. Content strategy outputs – Map out the primary outputs coming from activities such as voice and tone recommendations, content themes, editorial calendar recommendations, taxonomy schemas, migration spreadsheets, etc. It’s not practical to document all content strategy outputs in the form of a mind map, but the highlights of these activities can be documented to visually represent the primary findings.
3. Related elements that can impact a content strategy – Document aspects that may impact how you approach various content strategy activities. This may include aspects that impact CMS or workflow management tool selection. It is also useful to map out business goals and known dependencies that may influence your strategy.

If you have ever used mind mapping to organize content strategy activities, please let me know about your experience in the comments.

Other parts of the “Mind Mapping for UX Design” series:

• Mind Mapping for UX Design: Part 1 – Sketch Mapping
• Mind Mapping for UX Design: Part 2 – Research Maps

Research Map Example
Download the full-sized map (PDF)

What are research maps?

Research maps are mind maps that can help you manage all aspects of user research, from planning, to conducting studies, through analysis and recommendations. Using mind maps to arrange elements of user research allows you to visually structure information in a way that helps you to make connections between research elements. For example, a research map could help you connect research goals with themes from your findings, identify connections across interviews or test sessions, or to match findings with recommendations. Instead of looking at different phases of user research in isolation (e.g. creating separate documents for your research plan, observations, and recommendations), a research map can help you see the big picture across all phases.

How to create a research map

1. Place the topic of your research in the center of the map. 
2. When creating a holistic research map, create first-level topics branching out from the center of the map for each phase of your research effort. A research map could also focus on one or a sub-set of research phases depending on your particular needs.
3. Create sub-topics that branch out from each research phase with the key elements relating to that phase. Example elements you can include in your maps are listed below.
4. As you plan, conduct, and analyze your research, document elements that relate to each of your primary topics. Don’t worry too much about structuring your ideas and findings initially, just get them onto the map. Once you start identifying ways to group elements on the map, group them into parent topics with a label that identifies their meaning or similarities.
5. Connect related ideas using lines or arrows to help you visualize related themes or elements that have a cause-and-effect relationship.

Elements of a research map 

Research maps can contain a wide variety of phases and topics. Choose the elements that make the most sense for your particular research needs and that will help you make connections between elements once the map is created. Example elements your map may include are:

• Planning - Map your research plan to connect goals to the tasks and questions you will ask your participants.
  
  • Goals – What do you aim to accomplish with your research study? What’s important to your team and client to find out from the study?
  • Participant characteristics – Who will participate in your study? What criteria is important for recruitment?
  • Tasks – What will you ask your participants to do? Will tasks be structured or un-structured?
  • Questions – What questions will you ask your participants? What topics will be critical to probe on in order to meet your research goals?
  • Setup – How will you setup your study? Where will it be located? How will you take notes, record and share your sessions with others?
• Observing – Document key findings among your participants and make connections between participants to identify trends.
  • Participant Notes – What are the highlights of your observations of individual research participants? How do they approach each task?
  • Observed trends – What trends do you notice during the course of your research? What do you want to investigate further in analysis?
• Analysis – Connect your observations to generate overall findings and recommendations.
  • Themes – What were the primary issues your participants ran into? What worked well?
  • Quotes – What are the key quotes you want to leverage to support your findings?
  • Video clips – What video clips will be useful to present to your team and clients? What are the points in individual recordings that you will want to export?
  • Recommendations – What changes will you suggest based on the themes you identified?

As you can see, even though you initially create your mind map by focusing on individual elements of your research, many of these elements are connected to each other. The visual nature of the mind map can help you identify these connections more quickly than more standard methods of research documentation.

If you’ve tried using mind mapping for user research studies, let me know in the comments!

In part 3 of this series, I’ll discuss how you can use mind maps for Content Strategy.

To create a mind map, you simply start with a central idea, and branch out from that idea with each branch representing a topic related to that idea. Sub topics can be made in an infinite number of levels building off of each branch. It’s typically best to use colors and imagery in a mind map to help link together ideas in a way that’s easy to understand and remember.

Mind maps are powerful tools for User Experience professionals. In part 1 of this post series, I’ll explain how you can use mind maps to create “sketch maps.”

Sketch Map Example

What are sketch maps?

Sketch maps are mind maps of, well, sketches. They are diagrams that organize ideas in a tree-based structure where sketches are used as the way to illustrate those concepts. Others have used similar approaches under different terms (sketchboarding, storyboarding, or simply just mind mapping that happens to include sketches). I’m using the term “sketch map” to emphasize the use of the mind mapping technique. Whatever term you want to use, the idea is to make connections, generate new ideas, and identify gaps by leveraging the benefits that come from sketching: exploring and refining ideas quickly and visually.

How to create a sketch map

1. Sketch out your ideas on paper or use a computer, phone, or tablet. Any tool can be used as long as the end result is a low-fidelity sketch.
2. Identify if you want to create a paper-based or digital sketch map.
   1. If creating a digital sketch map using tablet or computer software, take a picture of sketches that you make on paper, or save screenshots of sketches made on a computer, phone, or tablet. Import your sketches into a mind mapping program that supports media imports.
   2. If creating a paper-based sketch map, assemble paper sketches or print out sketches made using a digital tool.
3. Write down a central theme or idea in the center of the map
4. Branch out from the central theme with topics and sub topics, each containing a sketch and label representing the concept. Assign each main branch a unique color for easy differentiation. As you start to generate new ideas, add those to the map.
5. Connect related ideas using lines or arrows to help you visualize related themes or elements that have a cause-and-effect relationship.

Types of sketch maps

There are different ways in which you could approach UX challenges using a sketch map:

• Layout approaches per page/process: Use the map to explore different layout options for each page or process within your experience (as seen in the example at the beginning of this article). Think about interaction methods and the high level ways to organize information.
• User flows: Arrange your sketches to illustrate different flow options throughout an experience. For example, navigating through a registration process from start to finish. The map could be used to explore different options for a single flow or to visualize several different flows across the experience. User flows do not necessarily have to mirror the architecture of an experience.
• Site maps: Use sketches to visually represent different areas of the experience. The sketch map can be organized into a site map that illustrates different levels of a site (or app, service, etc.) hierarchy. As opposed to a text-based site map, a visual site map with sketches can help you identify different approaches that will work across different levels of the experience.
• Micro-interactions: Use a sketch map to help you explore different approaches to micro-interactions, or contained moments that impact a single use case. For example, how to best design error messaging, settings, controls, etc. A map could be focused on a single micro-interaction or several related interactions to help identify connections across an experience.

If you have used sketch maps (or similar techniques) before, please let me know about your experience in the comments.

Part 2 of this series explores how mind maps can be used to help plan and analyze user research.

I’m aiming to get back into a more regular posting schedule, so you will soon be seeing more original articles.

If you have any comments about the redesign or have any suggestions for content you’d like to see here, let me know in the comments!

What is UX Recorder?

UX Recorder, created by Foraker Labs, is a screen recording iOS application that records user activity on mobile websites in addition to audio and video of the user’s face via the device’s camera. The application can only be used to conduct usability tests of websites, not other iOS applications. UX recorder is a universal application for iPhone, iPod Touch and iPad devices running iOS 5.0 and above that have a front facing camera (given heavy CPU usage, an iPhone 4 or 4s, iPad 2 or 3, or iPod Touch 4 is recommended).

UX Recorder currently costs $59.99.

This review will focus on the iPhone version of the application, tested with an iPhone 4S running iOS 5.1.1.

For more information about the application, visit www.uxrecorder.com.

UX Recorder in Action

Setting up a project:

Projects hold a group of session recordings. Each project can have a project name, description/notes, and website bookmarks that can be accessed quickly during sessions.  These bookmarks can be synced between devices using iCloud.  Picture-in-picture video settings can be set for each project, which allows you to place the recorded user camera in any corner of the screen or remove it entirely.  Recorded audio can also be turned on or off.  An assigned project date field is notably missing, which could make it difficult to find projects when many are loaded into the application.

Setting up sessions:

Individual test sessions can be assigned a name and description/notes.  Sessions begin by giving you the ability to load a URL from the URL bar or from a preset project bookmark prior to recording.

Recording sessions:

• Screen setup during  a recording: Recording is initiated by pressing a record button next to the URL bar.  Once started, a recording indicator and pause button becomes available. The in-app browser has a black URL bar and black toolbar with back, forward, add bookmark, and access bookmarks icons. This differs slightly from what a user may expect from the iOS Safari application, which hides the URL bar when browsing and also has icons for additional page actions and opening a new window.  New windows cannot be opened within the UX Recorder browser, but pages can be accessed quickly using the bookmarking feature. During a recording, the user camera display is not visible but is recorded in the background.
• Interrupting a session: Sessions might be interrupted if the user exits the UX Recorder application or if a website starts to play audio. If this happens, an alert allows you to re-start the recording.
• Ending a recording: After a session is paused, sessions can be canceled or completed using a “Done” button. I was slightly unnerved by the fact that no confirmation screen is given if you press the “Cancel” button. Sessions are immediately erased with no ability to recover them.  If you choose to end a recording, you can render it immediately or render it later. Rendering takes about 75% of the length of your session to complete, so for longer sessions it may be best to save the rendering process for later.

Exporting sessions:

• Export options: Sessions can be exported to iTunes, Dropbox, the iOS Camera Roll, or opened in other applications that support video. While the Dropbox functionality is nice to have, Dropbox has a file upload limitation of 180MB.  UX Recorder sessions can reach that size very quickly, in around 10 minutes.  Longer sessions will need to be exported via iTunes.
• Export format: UX Recorder exports files in H.264-encoded .MOV format. This format is highly compatible with most video viewing and editing software. For presentation purposes, you can insert .MOV files into Keynote presentations. However .MOV files need to be converted before they can be inserted into PowerPoint.
• Export time: Exporting to Dropbox can take a very long time. In my test of two videos totaling a little over 2 minutes, it took around 3.5 minutes to send those sessions to Dropbox. Transferring to iTunes is much faster by making the exported files immediately available under “Apps” > “File Sharing” in iTunes once a device is connected.
• File size: UX Recorder’s video files can be very large. A one minute file in my testing ranged from 9MB to 17MB depending on screen activity. Expect to need around 1 GB of space per hour-long recording, which can quickly add up over multiple test sessions and projects. Improved video compression would make UX Recorder more usable for long-term use.

Viewing exported files:

• Where exported files can be viewed: Exported videos can be viewed in any application supporting .MOV files (such as Quicktime).  They can also be viewed on your device within UX Recorder after rendering or via the Camera Roll if exported to the device.
• What an exported video looks like: Recorded sessions include the picture-in-picture view as defined in the project setup, and also displays taps (circles) and scrolls (arrows) via pink overlays on the video. There are no settings in the application to turn off the tap and scroll indicators. I found the scrolling indicators in particular to be a little distracting in the videos, so it would have been nice to have a setting to turn them off.

Limitations

UX Recorder’s limitations as a mobile usability testing recorder are important to call out, as they make the application less useful for certain mobile testing needs.

• Inability to record other iOS applications: This limitation isn’t Foraker Labs’ fault, as Apple rejects any applications that attempt to record activity in other applications.  However, this makes UX Recorder’s usage limited to tests of websites, and many UX professionals will still need a separate recording solution for native applications.
• Lack of a full screen mode: Much of my own mobile usability testing is done on HTML prototypes that mimic the look and feel of native applications. These prototypes, created in Axure RP, must be accessed in a browser that supports a full screen mode (or launched in Safari via a home screen shortcut) in order to remove the browser navigation bar and toolbar so that the prototypes look and feel like a native application as much as possible. UX Recorder does not currently have this feature, which makes it impossible to test a native application prototype. Given the inability to record an external application, having a full screen mode would at least allow UX professionals to test and record usage of HTML prototypes of native apps.
• Slow scrolling: UX Recorder uses its own browser built into the application. It looks and feels a bit different from Safari, especially when it comes to scrolling. In my testing, I found that scrolling was not smooth and that the screen jumped around more than it would in normal usage in Safari. It’s still very usable, but it might distract participants who are used to being able to quickly scroll up and down a screen.
• No analytics: UX Recorder is simply a recorder, it does not provide a summary of where participants tapped during a session or any other information beyond showing taps and scroll activity as an overlay when viewing a recording.
• Requires external power source: For tests longer than just a few minutes, it becomes necessary to have your iOS device plugged into a power source during testing. UX Recorder is very processor intensive and drains the battery extremely quickly when not powered by an external source. This may make it difficult to use UX Recorder with participants in a natural environment.
• Large file sizes and long rendering, exporting times: As mentioned earlier, video file sizes can be very large. At around 0.5 – 1GB per hour (actual sizes may vary), files become difficult to manage in large quantities. Rendering a single hour long session may take up to 45 minutes, and must be done before videos can be exported.  Exporting to Dropbox is limited to 180MB, but even short sessions take a very long time to export.

Recommendation

UX Recorder is a great solution if you’re looking for a quick and easy way of conducting usability studies on mobile websites on a limited budget. Its usage, however, is limited and cannot be used as a full mobile usability testing solution.

UX Recorder is best used for:

• Quick and informal tests of mobile websites
• Relatively short test sessions
• Tests that do not require external observers

Pros:

• Supports multiple projects and multiple test sessions within a project
• Allows the setup of bookmarks for quick access during test sessions that sync between devices via iCloud
• Records both on-screen activity as well as video from the front facing camera with multiple picture-in-picture settings
• Records audio in addition to video
• Displays clicks and scroll activity within video recordings

Cons:

• Inability to record other iOS applications (iOS limitation)
• No full screen recording mode
• Slow scrolling within the browser
• Lack of click analytics
• Requires a significant amount of battery power, making external power required for long sessions
• Very large video files for long sessions
• No setting to turn off the tap/scroll indicators in a video recording

Cost: At $59.99, the price may be seen as either a pro or a con depending on your budget.  While cheaper than most other screen recording solutions and full mobile usability testing setups, the price is still fairly steep given the application’s limitations.

Overall Rating:

Download UX Recorder from the App Store