Motorola Solutions Experience Design
an exploration and analysis of design patterns and user interfaces for integration into public safety platforms utilizing predictive analytics, real-time monitoring, and investigative reporting.
What is a Design Pattern? A design pattern is defined in architecture or computer science as a formal means to document a solution to a common design problem within a particular field. The same framework can be applied to design problems in user experience design. Patterns are structural and behavioral features that help to create a more enriched experience for users. They make functionality easier to understand, interfaces more beautiful, and tools more useful.
DESIGN PATTERNS
Most design patterns are derived from consumer products as many user behaviors develop through these interactions. They are guidelines that provide common solutions and possibilities to the friction caused by conflicting design elements. The organized collection of design patterns within a particular field is called the pattern language, and those associated within a particular company or product is its pattern library.
INTRODUCTION 1
And why does it matter for public safety? Designing for public safety systems and personnel requires an understanding of the standard procedures of agencies, the context and types of information, as well as the current technologies available. Traditional policing and safety methods using video surveillance, radio, and geographic analysis are beginning to be integrated with new forms of communication including social media and data visualization
DESIGN PATTERNS
for a more comprehensive and smarter means to enhancing the safety of public spaces. By examining the design patterns and user interfaces of social media, timelines, workspace environments, video editing, messaging and mapping; a better experience can be created for field officers as well as analysts and operators providing mission critical information to police, fire, ems and other public safety officials.
INTRODUCTION 2
As public safety personnel including police and fire begin to implement more advanced technologies and communications, we need to better integrate devices, platforms and users for a richer experience.
DESIGN PATTERNS
INTRODUCTION 3
[INFORMATION SYSTEM MAP] unidirectional
Agency
DESIGN PATTERNS
bidirectional
Social Media
INTRODUCTION 4
Social Media
Timeline
Workspace
Mapping
Messaging
Video Editing
DESIGN PATTERNS
INTRODUCTION 5
Social Media
!
!
!
IDENTITY
SHARE
SEARCH
ALERTS
communicate user personas through visual and text based biographical cues and extended social networks
share content through multiple platforms using direct messaging, public and private broadcast or 3rd party messaging applications
search keywords and user profiles to identify and view current trends through photo, video, and text from private and sponsored posts
personalize settings to receive alerts based on pre-defined criteria and characteristics to distinguish type and priority
SOCIAL MEDIA
INTRODUCTION 7
1 SOCIAL MEDIA
SOCIAL MEDIA IDENTITY
IDENTITY 8
[INFORMATION ARCHITECTURE]
SOCIAL MEDIA
IDENTITY 9
[ TWITTER ] WHAT Popular social media platforms such as Twitter are being leveraged for application beyond their development as a means to connect people in strictly casual social contexts. The aggregation of information, both visual and textual, and the reach of shared networks is a powerful tool for use in broader contexts, including public safety. They are a platform for users to create a persona and broadcast a personal voice beyond their closest relationships. WHY Breaking down the architecture of Twitter reveals a more complex and diversified collection of information through biography, online content and shared media. Visual identity through a fixed photographic placeholder and biographical descriptions are shown with an immediate presence and visibility at the top of the screen. The user’s extended social network is also viewed in close relation to the biography, providing a direct link to additional user personas. Centered on the screen below the biographical information, is the aggregated content and user feed. This information is organized as complementary to the identity projected by the user, but still allows for quick glance access to the content. The infinite vertical scroll
SOCIAL MEDIA
visual identity
biography
content feed
helps to enable this behavior. Each post also provides metadata including time and location, in relation to original posted content as well as any recycled content. Separate categorical containers for recommended and trending content provide additional context. Twitter
network
trends
time
places ‘trends’ in the right most column on a user’s main profile page. It can also be accessed on the main feed through the ‘Discover’ tab.
IDENTITY 10
visual identity
biography
content feed
network
trends
time
SOCIAL MEDIA
MOBILE Similar to desktop, the mobile platform also places a strong emphasis on the visual and textual cues of the user’s persona, with placement located at the top and center of the scroll. Orientation, scale and graphic elements including color, textures and typography help to distinguish the priority of information. Using these simple graphical elements help to minimize the visual noise and create familiar associations. Twitter still allows users to easily access trending topics, but the information is not placed on the profile page. Instead, it is placed on the main feed under ‘Discover’, similar in structure to the desktop. Recommended content and users are still available at the bottom of the scroll of a profile page. SCROLL Again, the infinite vertical scroll provides a quick glance through content, but doesn’t collect and display information in a true timeline as posts and commentary can be recycled and shared to other users through a dynamic series. Each post also allows for drop-down expansion to view additional users and provided commentary on content as well as detailed timestamp information.
IDENTITY 11
[ PINTEREST ]
MOBILE
DESKTOP
WHAT More visual based platforms such as Pinterest place a greater emphasis on content and less on the user. The tiles act as containers for content, mostly visual including photography and icons. A column grid is used in both mobile and desktop environments while white and negative space is used throughout the interface with minimal touches of texture such as drop shadows. WHY The layout provides easy navigation and categorization of media types and allows users to easily scan and identify desired information. The tiled structure provides a clean organization and emphasizes visual cues to help guide users through the platform. The proximity of the tiles within the columnar grid eases tension but also establishes relationships between content. There is little emphasis on extended social networks and user associations throughout. SCROLL Content focused platforms still provide an infinite vertical scroll, but information is more randomly displayed on the grid, with no visible indication of when the content was posted. On the mobile platform, a two column grid is used while on the desktop a five column grid is used, allowing users to easily scan visual information.
SOCIAL MEDIA
visual identity
biography
content feed
network
trends
time
IDENTITY 12
2 SOCIAL MEDIA
SOCIAL MEDIA SHARE
SHARE 13
[SHARING MODES]
f
SOCIAL MEDIA
t
+
SHARE 14
WHAT One of the most prevalent and popular ways to share discovered content is through social links. Users can specify which platform to use to share information with others, including social media such as Twitter and Facebook, to more common messaging tools such as email.
medium may also be selected such as Linkedin for content catered more towards professional networks. Some sources such as Newsweek allow users to view the number of times a piece of information has been shared through that particular platform, highlighting its relevance and popularity.
WHY Extended messaging options including the ability to send an email as opposed to social media posts allows users to send a more secure and private message. Depending on the type of content, a more appropriate
Each messaging platform is visually represented by a simple icon, providing easy recognition and little variance from one resource to the next. Newsweek uses an associated color highlight to the particular application when hovering over it,
[ NEWSWEEK ]
SOCIAL MEDIA
such as bright blue for Twitter, royal blue for Facebook and red for Google Plus. Nowness labels the list of icons with Share, but most users will easily recognize the list of icons as a means to share information. A highlight is also used for the selected icon, with a color associated with the color palette of the Nowness brand. Utilizing simple and easily recognizable associations such as color and icons allow users to quickly disseminate information through a selection of messaging platforms.
[ NOWNESS ]
SHARE 15
WHAT Many platforms allows users to directly select who they want to send information to. Based on an authorized list of contacts stored within the application, a user can choose specific individuals, ranging from a single to all contacts. These contacts may be added via personal invitations, links with other social media accounts, or through a search of users within the application. This functionality has become popular in more visual based applications such as Instagram and Slingshot. WHY An empty circle indicates the availability of users to send information to. After a selection, a check mark and filled circle confirms that a contact has been selected to receive the information. The checkmark and filled circle are a common visual cue to confirm messaging selections. The list of contacts will also indicate the full name as well as any associated nickname created by that contact. Users have a more defined sense of where the content is being sent to. The functionality provides a secure and private channel similar to email.
[ INSTAGRAM ]
SOCIAL MEDIA
[ SLINGSHOT ]
SHARE 16
[ MEDIUM ]
WHAT Medium is a storytelling platform that allows users to interact with the story, author and other readers. Users can post commentary on any part of a story and create dialogue amongst the Medium network. After selecting a specified portion of the story, users are given the option to either create a new comment, or share it through Twitter.
SOCIAL MEDIA
WHY The ability to add immediate feedback and select only segments of content provides a more refined and focused interactive experience. Still providing an access point for Twitter ensures integration with other platforms. Users can easily recommend, bookmark and embed links to related content within the story. Medium also guides users with the approximate time required to read the story.
SHARE 17
3 SOCIAL MEDIA
SOCIAL MEDIA SEARCH
SEARCH 18
Figure 1
Figure 2 WHAT Many websites provide a fixed search bar near the navigation menu, while others provide a more dynamic functionality that allows search to populate only when cued to do so. As shown in Figure 1 above, users can select the search icon located near the navigation menu to engage the functionality. Desktop search should provide a clear delineation from the rest of the site and allow users to easily get the information they need. SOCIAL MEDIA
WHY Once engaged, a cursor provides visual indication of where to enter search criteria. As a user enters criteria, a list will begin to populate the results, gradually providing more refined results. Many platforms such as CreativeMornings also provide icons as shown in Figure 2 to distinguish the type of result. A filter is an added feature that produces a more refined search result through categorization.
SEARCH 19
[ JELLY ]
[ VINE ]
[ BREWSTER ]
LOCATION Jelly provides search features that find specific answers to questions based on captured images or physical positioning within a geographic area. Users can ask a specific question using their camera, geographic location or a traditional text based message. Answers will be provided by live users or through archived responses.
TRENDING Topics can cover a wide variety of information from cultural events to science and design. Categorizing these posts into a grid of equals tile provides clear visual cues to help the user access the type of information they are looking for. Color classifications and icons also provide quick visual recognition.
DEPOSITORY Search can also act as a general depository where stored information is aggregated in categorical form. Brewster provides users the ability to search for contacts based on specific criteria such as ‘Design’. Search results will categorize based on characteristics such as employment or education background.
SOCIAL MEDIA
SEARCH 20
4 SOCIAL MEDIA
SOCIAL MEDIA ALERTS
ALERTS 21
WHAT Utilizing iconography and color to provide information on the type and status of an alert can be helpful in providing a simpler means for users to identify actionable items. A simple color palette and icons are used throughout the interface.
[ THEME FOREST ]
SOCIAL MEDIA
WHY Iconography and color help provide separation when there are several different types of alerts and notifications that may be present. Familiar associations such as green with success
or confirmation and red with alert or error, help to allow the user to easily recognize the types of alerts they have received or are currently outstanding. Simple icons also help to provide familiarity including checkmarks, exclamation points, x’s and simple geometric shapes including triangles and circles. Helping to limit the cognitive process a user has to perform provides a more enjoyable user experience.
ALERTS 22
[ GOGOBOT ]
[ SWARM ]
[ SUMMLY ]
MINIMAL A simple list allows users to easily scan notifications and alerts based on the timestamp. Filled and hollow circles indicate whether an alert has been viewed and a brief description of the event provides information about content and priority.
POPOVER A popover provides additional actions or options to consider. This could be a confirm, decline, or a new user flow providing additional actions to take. Popovers lay directly over the previous screen, providing a reference to the user’s activity within the application.
CATEGORICAL Categorizing alerts and notifications into a tile-based system provides a more streamlined interface and greater ease in searching for notification types. The user can then set a priority for the type of notification based on frequency of use.
SOCIAL MEDIA
ALERTS 23
Public Safety Recommendation A simple and intuitive interface for operators and officers to share relevant social media posts. Individual contact selection is the most efficient and secure method to send targeted information to select individuals. Native information hierarchy isn’t applicable as an API or 3rd party application will be required to integrate feeds. Provide multiple methods to search specific keywords or geographic locations based upon relevant criteria. Adding a filter and/or icons will help to easily distinguish the different results for quick analysis. Popovers after any selection are not preferred for any actionable items as they will occupy additional screen space and can disrupt user navigation. Widgets can be used with limited functionality for common tasks or quick reference to real-time information.
Timelines
Notifications
1
TIMELINES
TIMELINES + NOTIFICATIONS
TIMELINES
26
[ HOLSTEE ]
WHAT The horizontal timeline used by Holstee provides media embedded events within the timeline. A user can select a specific event and additional details will emerge. As shown on the left side of the screen, the density of the timeline provides adjustments and user customization for contextual manipulation. Dipity is an application that also provides a similar user experience, with embedded TIMELINES + NOTIFICATIONS
MEDIA After an event has been selected, expanded media populates the interface and provides stories, photos or videos. This allows the user to view additional content when needed, and collapse the media when not in use. An arrow scroll also allows for a quick scan through events without having to return to the timeline.
media throughout the horizontal timeline, which can also be scaled using a simple zoom functionality. WHY Placing greater control in the hands of the user allows greater flexibility based on the type, quantity and context of information being consumed. Zooming in provides a more focused view of the actual instance of when the event occurred within the timeline. The
user can also zoom out to condense the events and gain a broader understanding of the quantity and proximity of events. The orange marker remains in a fixed position as users can slide through the timeline. As a specific is event is clicked on, the timeline will autonomously slide to position that particular event at the orange marker.
TIMELINES
27
[ AEON ] WHAT The Aeon multi-event timeline provides a single platform to visualize relationships between separate events but also display the independent characteristics that make each event unique. Since it is dynamic and has no defined endpoint, inputs can evolve over time. Connections to people, places and ideas with embedded media can be revised as needed, including links to photos, video or other external documents.
TIMELINES + NOTIFICATIONS
WHY Placing multiple events on a single timeline provides a single interface to create and demonstrate important relationships between independent and interrelated events. Color coding and geometric imagery can be used to visualize linear but also cyclical relationships. The timeline also helps to minimize the amount of information initially presented and allow users to access additional content if required. Aeon presents as
much data as it can without being overwhelming. Every item on the timeline presents an action or link to further understand patterns embedded into the relationship. Its representation as a nontraditional timeline, which doesn’t guide the eyes in a strictly linear and chronological manner, offers the opportunity to backtrack and access various points of information, but still remain easily recognizable as a time based visualization.
TIMELINES
28
WHAT A widget is a small application housed within a browser or web application that provides limited functionality. The main advantage is its flexibility and customization that allows users to continue working in a native environment without any disruptive navigation to a separate platform. The widget can easily be added or removed from a workspace. The widget displays basic details surrounding an event, but also easy navigation to additional information. Again, all events on the timeline provide an actionable item, such as expansion of activity details or setting an alarm for important deadlines or deliverables. Selecting an event may open up a separate application or take the form of an opaque popover within the same workspace. WHY Widgets allow customization on the screen dependent upon available space and common user tasks. This provides workflow continuity and the ability for users to remain in a particular environment while still having access to the timeline if required. The opaque overlay helps to minimize visual noise and not inhibit the user’s workspace. As shown on each of the featured screenshots, widgets are truly responsive and can adjust based on the device’s screen size and other applications running.
[ CALENDAR AGENDA WIDGET ]
MOBILE The mobile widget is a direct replication of the desktop, only scaled for available screen resolution. It still provides the simple opaque interface that overlays the workspace. If users were to select additional activity details, a separate screen or application would need to be opened due to limited available screen space. However, the second screen shows that the widget can again be customized and adjusted for size, providing an opportunity for all information contained within the home workspace. Basic color coding using blue, green and red help to categorize event types.
TIMELINES + NOTIFICATIONS
TIMELINES
29
2
NOTIFICATIONS
TIMELINES + NOTIFICATIONS
NOTIFICATIONS
30
[ GOOGLE NOW ]
[ APEX NOTIFIER ]
WHAT Google uses a browser extension to sync user notifications within a single module. These notifications extend beyond just calendar or social media updates and provide more predictive information based on user behaviors and experiences. Each notification provides additional actions that can be taken in the bottom left corner including management, modification and confirmation.
WHAT Similar to custom widgets, the centralized notification center for Apex Notifier aggregates all notifications into one widget. It acts as an overlay within the existing desktop space and displays a minimal amount of information with no text. Simple icons and numeric values are used to communicate information.
WHY The ability to sync with multiple accounts and present information in one centralized container helps to minimize navigation and utilize existing workspace environments. Enabled technology such as Google Now begins to guide user actions as notifications may include upcoming appointments, detailed assistance or more descriptive information. Information can be easily removed from the module by selecting the ‘x’ in the upper right corner of the tile.
WHY The icons and numbers provide easy recognition of notification types and users can customize which information is displayed on the overlay. An opaque appearance also helps to minimize visual information on the screen and not disrupt current tasks as it provides only the information the user seeks. Utilizing an element like this creates a central repository for recognition of outstanding notifications when multiple features are in use. Displaying the overlay on a main workspace also limits the amount of navigation between multiple interfaces.
TIMELINES + NOTIFICATIONS
NOTIFICATIONS
31
[ TASKER ] WHAT Tasker is an Android utility which provides self inititated automation for all applications installed on a mobile device. Users can create custom criteria to enable the phone to perform a specific action and response when an event occurs. If a user opens the door to their car, Tasker can recognize its geographic location and enable GPS technology such as Google Maps based on user specifications. Within each event, the user of the device has the ability to set the conditions and the action that will occur when certain actions are met and not met. WHY Using Tasker allows users to continue using the native applications installed within the Android device and not navigate to another interface to create custom actions. When a notification is received from Tasker in the notification bar, selecting it will bring the user to that application rather than into Tasker. It operates incognito and does not inhibit the user experience. The ability to build your own reminder notifications and to-do lists provides a unique functionality to enable how a notification is displayed, when it is displayed, and what events will trigger a notification. This allows operators and field officers to have full control over the types of alerts received. Contextual notifications will provide immediate feedback and initiate greater efficiency in communication between operator, command and officer. The automation can also be used for application beyond notifications including audio and voice recording, GPS or messaging.
TIMELINES + NOTIFICATIONS
NOTIFICATIONS
32
Public Safety Recommendation Integrate a multi-event based timeline as an operator may need to have eyes on several incidents occurring simultaneously. Embedding media elements such as photo or video through an expansion element or a quick glance overlay is preferred as it can be easily minimized. The timeline should have a fixed position within the command center as it will be actively monitored. An exploration of more predictive analytics that utilize technology similar to Google Now, can provide automated smart assistance to operators and begin to suggest and deliver related information as new pieces of evidence feed into the command center. This technology can also be used to sync and integrate multiple points of interaction such as mobile devices in the field with the central command center.
Workspace
[ PINTEREST ] WHAT Similar to the clustered tile structure used by Windows, Pinterest uses a more organic waterfall structure based on a fixed columnar grid. This allows the type and amount of content to influence the structure. Each tile acts as a link, rather than an expansion for more information.
WHY Use of the waterfall column structure makes the content easily digestable and understandable at a quick glance. Spacing and proximity allow both vertical and horizontal scanning and don’t force a unidirectional consumption of information. Content adjusts based on its relationship to other information contained within the space and the type of media being presented within the tile. Each tile is also set in a fixed position until new additions are made and cannot be manually moved within the workspace. It takes a reactive structure to the breadth of information as layout adjustments will be made inherently in the application as the type and quantity of content change. Both the mobile and desktop interfaces make frequent use of white and negative space which limit visual strain, especially with the prominent use of imagery within each tile.
WORKSPACE
TILES
35
[ FLIPBOARD ] WHAT Self-revealing interactions provide visual cues for new gestures applied to elements without interfering with the user experience. Flipboard utilizes these interactions throughout, whether its the customization of the workspace or browsing and editing content. Flipboard is part of a suite of applications which simulate the experiences of content consumed from physical products.
WHY These types of interactions help to replicate familiar experiences that users have with common activities and consumption of information as mentioned previously. Navigating through content provides the experience that one may have while reading print material. When a user begins to swipe a page, the interaction will modify elements to replicate the visual and physical experience when reading a book or magazine. As shown below, after the interaction has been initiated, it shows the resulting turn of the page and reveals new information. The grid of equals also provides easy opportunities to preview and select items.
In both the mobile and tablet devices, the platform notifies users after they have made an indication that they want to customize the desktop. By holding down on a tile, content can be arranged or cleared from the workspace through the familiar ‘x’ icon. Both the mobile and tablet provide a grid of equals. WORKSPACE
SELF-REVEALING INTERACTIONS
36
[ X MIND ] WHAT Mind Maps are relationship based visualizations of events and associated details utilizing lines, words, symbols, color and imagery. The traditional comparison is to a large urban area, with the city center occupying the central space and the main and secondary roads leading out into different directions. The mind map allows for the organization and collection of all ideas and themes related to a specific topic or event. The mind map shouldn’t overwhelm the user with too much content, but rather utilize simple keywords and descriptors to distinguish the content. The hierarchy of information is displayed through the extension and distance away from the central theme. WHY The radiant structure produces a more natural and efficient way for our brains to identify relationships between competing components. Utilizing color associations and icons can also help to provide visual relationships between elements. As shown in the figure, X Mind is a mind mapping tool that provides users with additional features to organize content. Branches can be expanded and condensed based on frequency of use and available screen space. Through each branch as well, links provide additional information and content that isn’t necessary to be shown on the original mind map, but rather just as available information when needed.
WORKSPACE
MIND MAPPING
37
[ DUBBERLY DESIGN ] WHAT Concept Maps are a collection of facts visually presented in the context in which they operate. It represents a picture of our understanding of a particular subject. It’s usually a large scale diagram that shows the relationships that exist between small pieces of information. The collection of terms also called nodes, and verbs which are the link between terms, help form a propositional statement. Similar to Mind Maps, the viewer can see the main theme or subject as well as all ancillary paths and associations that extend from the main theme. Generating a concept map involves the generation of a list of words associated with a main theme. These words are then edited based on those that have relevancy to the main subject and organized according to their relationship with one another. The concept map also provides a hierarchy of information. WHY This framework provides a visual guide to identify relationships through simple keywords or phrases. Many times icons and other imagery aren’t the appropriate medium to communicate information. Using simple variations in typography provides information hierarchy and visual cues to the user flow which allows the viewer to easily recognize primary and secondary information. The graphics on the map are kept very simple as well, with a few select colors to highlight different pieces of information, such as blue for subjects and headlines.
WORKSPACE
CONCEPT MAPS
38
Public Safety Recommendation For a main desktop workspace, drag and drop tiles allow operators to easily manipulate and synthesize relevant content as a situation changes. The tiles can easily be rearranged based on priority and relevance. Embedding imagery also provides a quicker way to glance and identify different types of content. The disadvantage for the tiles is they don’t show existing relationships between information within an incident. MindMaps and Concept Maps can be utilized to help show the relevant relationships, but these frameworks are also much more appropriate for a larger scale medium, rather than a smaller screen space. The ideal interface would present information in a tile based format which could also show at some level, different relationships which exist.
Mapping
[ UBER ]
[ NESS ]
WHAT Object-oriented lists show accurate positioning of specific people, places and objects within a selected geographic area. Users can view vehicles, businesses or other people. Through these interactive applications, additional actions are encouraged such as requesting a service or communicating with a desired object.
WHAT Geofencing is a technology that is used to create a virtual boundary, or fence, around a selected geographic area. This can be selected based on a predefined distance list as shown by Ness, or through a custom radius that can be manually entered. Geofencing is useful for tracking the types and number of activities that are related to a specific incident.
WHY Placing specific types of objects on a GPS-enabled map provides users the opportunity to have a better understanding of their environment and the interactions that can take place. Simple icons provide easy reference for the types of objects within the map and providing simple tasks that minimize choice and user paths allow for mobile decision making. These applications also take advantage of the capabilities of other technology and stored information inherent in a device such as mapping, profiles, or historical patterns in user behavior.
WHY Visually enabling a geofence provides reference points for the progression of an event through time and the associated movement and activity of specific objects including vehicles and people. The geofence can also be adjusted at any time to more appropriately reflect the dynamic nature of an incident. This feature can be used as a monitoring device from a fixed position or in a more mobile state to track.
MAPPING
OBJECTS + GEOFENCE
41
[ INSTAGRAM ]
[ VSCO ]
WHAT Overlayed imagery on a map provides additional context and points of reference. Selecting photos in relationship to a particular area can be done by scanning the selected map area and utilizing the zoom function to scale the region. Numerical values also provide an indication of the number of photos related to that particular geographic point
WHY Laying the images directly over their source location provides applicable metadata without having to review additional information. A user can determine which location on a map they need to review and directly access more detailed information through the photos. By selecting an image, a simple enlargement onto the map provides a more complete view of the content while still maintaining the current map information and populated imagery. This feature also allows other applications to sync with the map and limit the navigation paths that users need to take to access the required information. The desktop map by VSCO also eliminates some of the detailed colors and terrain used in more detailed platforms such as Google Maps, to place greater emphasis on the imagery. A variable map view is a worthwhile consideration for this type of use in which map detail levels can be adjusted based on required outputs.
MAPPING
IMAGERY
42
[ WAZE ]
WHAT Crowdsourcing information is the process of obtaining services, ideas, or content from a large group of individuals, whether it be online web-based content, or contributions from built environments. Different people can provide proprietary pieces of information that they either have a particular expertise in, or because they are experiencing a particular event or situation. Waze and Foursquare are two popular mapping applications which MAPPING
[ FOURSQUARE ]
utilize crowdsourced information to provide geographic details such as traffic patterns, reviews, and recommended courses of action based on this information. WHY This type of information is dependent upon what people are willing to contribute. Waze isn’t useful unless other people decide to contribute first-hand experiences of what current traffic patterns look like. But relying on
this type of information provides the most accurate and relevant data as it provides real-time updates. Foursquare doesn’t utilize time-sensitive data, so much as it allows users to access a trusted database of resources such as friends and family. More complete knowledge of the source of information provides users with a better understanding and confidence in the validity of content.
CROWDSOURCING
43
[ FOURSQUARE TIMELINE ] WHAT In collaboration with Samsung, Foursquare has developed a visualized timeline that creates a categorical path which tracks places that users have checked into within the application. Specific colors are used to categorize the types of visits, and additional information such as day of week are also displayed. Bar graphs are used to visualize the ‘days of the week’ data as well as the top categories. The emphasis in this platform isn’t on the details of the map, but rather on the historical path a user has taken through a geographic area. WHY By focusing on dynamic user data, rather than more static publicly available information such as geographic details, we can better understand patterns and specific user behaviors. This focuses on the people and things in an environment, rather than the environment itself. The interactive experience redefines what a timeline can look like and enriches the insights that we can find from recorded user data. While there are online privacy concerns about what information we involuntarily or agree to provide, the ability to better visualize our behaviors and daily inputs and outputs is a powerful tool.
MAPPING
DYNAMIC PATH
44
[ ODYSSEY ] WHAT Storytelling is a powerful tool that creates a profound impact and empathy for outside users, especially combined with strong visualizations. Odyssey is an application that allows users to create customized visual stories based around structured and unstructured data sets, such as Twitter posts. The feature below tells the story and experiences of Ramadan as people around the world express their daily emotions through Twitter. Using the playback slider on the bottom of the screen, any point in the timeline is accessible. The creator of the story can add any type of text or visualization to help strengthen the impact of the story.
MAPPING
WHY Integrating text, visuals and audio into a single integrated platform allows for a more complete and detailed analysis and presentation of an event or activity. Twitter has become a powerful tool for people to tell their story to the rest of the world. Utilizing Odyssey helps to construct a more powerful first-person perspective of how an event occurred. Using a playback function rather a manual adjustment for the timeframe also helps to more seamlessly tell the story and provide a stronger relationship between connected events.
STORYTELLING
45
Public Safety Recommendation Integrating object based maps with geofencing technology provide the most advanced real-time monitoring and analysis as an incident progresses. The ability to easily identify the different people, vehicles, and agencies involved, with icons and color provides immediate feedback to an operator. The geofence also helps to refine the search area and focus on particular objects through a dynamic radius that can be manually adjusted by the operator. Crowdsourced platforms, in addition to social media, will begin to provide context relevant information that will be essential to understanding the status of a current incident. Though this information is still dependent upon the participation of the public and its validity is not reviewed, it can help agencies respond in the most appropriate manner due to the immediate feedback.
Messaging
[ SICHER ]
PRIVACY | GROUPS Selective messaging provides encrypted chats within group discussions. When sending private documents, this ensures only those selected will receive the information. The collaborative environment is private and intended for only those approved. Personal data is also not stored within the application and a passcode is required for entry. MESSAGING
PRIVACY | PURGE Enhanced security features such as purged data and auto-deletion allow for complete removal of confidential information from a device. This allows for secure storage after information has been sent to a workstation and deposited into a more secure hard drive. The information will never be stored on a server unless the property of a recipient.
PRIVACY | DELIVERY The ability to send multiple file types such as photo, video, voice or document using encrypted technology prevents any risk in the interception or corruption during delivery. When encrypted, only those on the recipient list will receive access to the files. The ability to send any type of file and media helps to better inform individuals associated with an event. SECURITY
48
[ MIGHTY TEXT ] WHAT With the mobility of information becoming more accessible and the dynamic environments in which we send and receive data, technology that syncs our devices into a single integrative communication platform creates cohesion and unity. MightyText is a unified communication platform that allows mobile and desktop messaging data to sync multiple devices and environments. Using stored device information, a user can monitor the status of a mobile device such as battery life and network MESSAGING
activity. The same information contained within the mobile device can also be viewed within the desktop environment. Pushbullet is another application which provides a very similar experience to Mighty Text, and enhances the capabilities of sharing information between multiple devices. WHY Syncing information from the desktop workspace to mobile device allows all mobile information to be scanned and reviewed in greater
context. Contacts can be more easily scanned, photos and videos can be viewed in greater resolution, and extended conversations can be viewed with greater efficiency. Photos and videos taken on the phone can then be easily stored and secured on the desktop platform. With flexible viewing modes, multiple conversations can be communicated within a single screen using the desktop application. Any mobile related alerts will also populate on the desktop. SYNC
49
Public Safety Recommendation Any messaging platform used will need to have encryption capabilities to provide secure information whether its photo, video, voice or text. The diversity of content required to communicate between a central command center and field officers will require an integrative application that can easily sync and track large amounts of communication data. Also, advanced features that can send and sync map information or files from a desktop to a mobile device will help streamline the flow of information. For quick delivery of smaller quantities of information, an interface that replicates an instant messaging platform, rather than email, will help to increase the frequency and efficiency of communications time-sensitive situations. Email messaging is necessary, but is more appropriate for large file sizes and a broader set of recipients.
Video Editing
[ SNAPPY_TV ] WHAT The ability to quickly edit and present visual information from a video feed is essential in time-sensitive situations when trying to communicate specific content from a video. Full video clips are not necessary in most situations, so selective processing is needed to clip frames from a full feed. SnappyTV is an application which allows for quick edits and creation of animated GIFs. Animated GIFs are smaller sized photographic files that mimic the experience of watching a video. The length of the GIF can range from 2 seconds to around 6 seconds. This provides a quick glance of information. Currently the application runs through a 3rd party browser, but a separate API could be created to allow integration into a larger workspace environment.
WHY When working with multiple parties in various locations, and trying to quickly communicate information, full size video documents are cumbersome to transfer, view and store. When only a selection of media is required in certain situations, the ability to select a quick clip which reduces the file size makes it easy to message the clip to other parties and for the recipients to quickly gather the relevant information. SnappyTV provides a clean interface that leverages basic horizontal sliders to create selection points within a larger video. After a clip has been created it can easily be exported to a variety of formats dependent upon device technology, can be shared through secured email or other messaging platforms, and can be easily edited if needed.
VIDEO EDITING
ANIMATED GIFS
52
[ WE_VIDEO ] WHAT With similar editing capabilities to SnappyTV, but with the added feature of cloud based editing, WeVideo is a video editing application which provides a clean user interface and the ability to integrate multiple video clips into one timeline. This is more reminiscent of more advanced editing software such as Adobe Premiere. WeVideo features a drag and drop database to easily move content around, but also uses the intuitive sliders to adjust the length of clips. Once fully edited, files can then be uploaded to a cloud account to securely share information with other parties. WHY The more advanced editing features combined with the cloud storage provide a more complete platform for editing larger amounts of videos. WeVideo doesn’t provide the same agility as SnappyTV to quickly create animated GIFs, but is more robust in telling a complete story through a larger collection of video feeds. The timeline provides a detailed view of the different related events and provides a location to easily edit selected content. A larger screen in the upper right corner of the fully edited video provides greater resolution and the tiled depository on the left allows the user to easily scan new or existing content.
VIDEO EDITING
ADVANCED
53
Public Safety Recommendation The video editing should allow users to make quick edits and selections of video feeds to send only relevant frames. Most of the video editing will be performed on a desktop workspace, but there will need to be considerations for file size if shared with a mobile device. File size will limit the quantity of video that can be sent, so the ability to specify an exact screenshot is required. Animated GIFs can accomplish this and can easily be delivered through a simple messaging platform in a relatively short manner. For post incident analytical purposes, a multi-view timeline that can aggregate multiple video sources is essential to integrate and tell a complete story of the events that unfolded. This feature isn’t necessary for mid incident monitoring or to provide quick bits of information, but rather when gathering evidence and performing deeper analytics.