mskangs.com

Service Type

UX Guideline

Project Status

Referenced in the creation of client's guidelines

Role

UX Leader | 35% (4 UX Team members)

Tool

Powerpoint, Illustrator, After Effects

Service Type

UX Guideline

Project Status

Referenced in the creation of client's guidelines

Role

UX Leader | 35% (4 UX Team members)

Tool

Powerpoint, Illustrator, After Effects

Min

Emotions Beyond

Technology

Emotions Beyond

Technology

Home

About

Services

Contact

Min

Emotions Beyond

Technology

Emotions Beyond

Technology

Min

Emotions Beyond

Technology

Emotions Beyond

Technology

SIC (Samsung Interaction Chart) standardization

A Pilot Project: Developing Standardization Guidelines for Chart Interaction at Samsung Electronics

The SIC project aimed to develop standardized UX guidelines for intuitive touch interactions based on chart information.

In 2015, Samsung Electronics had not yet finalized internal UX standard touch interaction guidelines for implementation in upcoming mobile phones and tablets.

Therefore, they initially commissioned our company to develop standardized user touch interaction UX guidelines based on chart information, which could be referenced internally at Samsung Electronics.

Based on various research findings, we developed user-centered touch interaction guidelines and delivered them to Samsung Electronics."

UX PROCESS

Competitor analysis

Desk research

Definition of chart elements

Defining features and user value of the chart.

Mapping touch interactions for each chart.

> Mapping touch interactions for each chart.

> Providing useful information in three dimensions.

> Exploring entertaining elements

Usability evaluation

Prototyping.

- Paper Sketches

- Wireframing (UI Definition & Workflow)

Discover

Define

Valiate

Ideate

Build

Benchmarking

I analyzed information delivery methods through competitors' charts to understand the mental models users typically had with chart-based interfaces.

MS PPT

Providing various bar chart forms and layout options

Offering diverse three-dimensional effects and theme group options for graphs

Enhancing data utility by

providing various file-saving options

Keynote

Providing 3D charts and chart animations

Offering interactive elements in charts, such as depth and movement, using texture and animation features

Apple E-book

Providing various three-dimensional effects and image representation options for graphs

Preventing difficulty in manipulation through the provision of handlers

Statsilk

Offering features specialized for information comprehension (Animation, Data Table, Full Screen Mode, etc.)

Providing playtime-based animations for charts and graphs (displaying data changes in animated form based on the timeline)

Consumer Barometer

Sequentially providing guidance pop-ups for setting up comparative data items

Extracting desired graph result data values to PDF (image) or CSV (Excel data) through detailed categorization

[Comparison of correlation relationships]

[In General]

Relationship Bar Charts are used when comparing two sets of data with different variables around a common set of items

[Comparing Correlations with an Emphasis on Expected Patterns]

A Scatter Chart is utilized when assessing the relationship between two variables based on the established expected pattern..

Classification of chart attributes

I classified the information attributes of the chart and analyzed the range of the chart that users typically understand.

Comparing components

Analyzing the proportional representation of

each element within the respective items

Trend comparison

Comparing Information Over Time: Understanding Trends

Item comparison

Comparing numerical values of multiple items

Comparison of correlation relationships

Comparing the proportional relationship

between two variables

Frequency comparison

Dividing incremental values into multiple ranges

and understanding the distribution status of frequencies

within each range

[Comparison of components]

[In General]

Pie charts are used for data with

a single series or up to 2-6 items

[For Multiple Series]

For data with more than one series, use

a percentage vertical bar chart (Column Chart)

[When representing the Proportion of Upper and Lower Classifications]

Doughnut charts are used when it's necessary to display both the upper classification

and its sub-classifications on a single chart, showing the proportion within each

[Trend comparison]

[In General]

Horizontal bar chart, which allows for the most intuitive comparison of trends based on values

[Representing data accumulating over time]

A stacked column chart is used when comparing accumulated

values over time and comparing them with existing values

[Comparing trends between two or more series]

A multiple line chart is used to represent the trend of changes over time

in data with two or more series

[Item comparison]

[In General]

Bar charts are used for easy numerical comparison between each item and to quickly confirm the numerical ranking of all items at a glance

[Emphasizing Contrasting Item Values]

Deviation Bar charts are used to highlight exceptional results

[Frequency comparison]

[In General]

Distribution Column Charts are suitable for representing

the frequency distribution among approximately 8 items or less.

[Representing Accumulated Data Over Time]

Using a Line Chart is beneficial when there are more than 9 items or when the items represent continuous data over time, enabling the understanding of the frequency distribution of continuous data

Definition of chart elements

I defined the final set of chart elements to ideate, focusing on the most common and user-friendly types among various charts, including bar, line, pie, and radar charts.

Determined the target charts to provide various features and touch interactions

Finalizing Various Features

I categorized the features to be provided in the chart into basic features for novice users and advanced features for expert users.

Features designed for novice users,

offering simplicity and ease of operation

Basic Features

Advanced features designed for expert users,

enabling more specialized and in-depth information comprehension

Advanced

Features

Advanced Feature

Basic Feature

Appear
The motion of the graph initially
appearing on the screen
Providing feedback
on graph appearance
Detail Information
Providing the values (numerical data) of the graph in a small popup
When hovering, a brief presentation of detailed numerical values for the respective bar is provided
Navigate X/Y
Providing detailed numerical information for each point on the X and Y axes
Accessing supplementary graph data beyond the current screen view
Upsize/Downsize
Zooming in or out on a specific portion of the graph
Enhancing Graph Clarity: Distinct Information Differentiation via X or Y Direction Zooming
Compare with Standard
Presenting a comparison between specific benchmark values (average, target, maximum, minimum, etc.) and actual data
Showing the difference values for all items based on the selected reference point through a graph and tooltips
Change data area
Providing the same data in a different form of a graph
Effortlessly Understanding Varied Information Through Diverse Graph Types
Group/Ungroup
Graph feature allowing the addition or subtraction of desired groups on the chart
Comparing only the values of the desired group
2D/3D
"Switching between 2D and 3D views of the graph
Transitioning from 2D to 3D for a comprehensive view of related information on the graph, facilitating easy understanding of depth and category structures
Navigate Z
Moving the 3D graph back and forth
Navigating the 3D graph along the Z-axis to comprehend the entire information not visible on a single screen
Detail
Providing detailed information for a single item
If there is no sub-depth information, providing detailed information for each item
Change depth
Providing a graph by entering into a different depth
Providing detailed information for the selected item with a graph if there is information at a lower depth
Compare
Comparing elements by selecting the desired data points on the graph
Directly comparing the information at the sub-depth of the selected item

Change amount of
information
Showing or Hiding Grids and Numerical Values as Needed
Enabling Information Density Control: Allowing Users to Transform Bar Appearance (Icon, Shape_Square, Round, Color, etc
Arrangement
Sorting Graph Values in Ascending or Descending Order Based on Numerical Data
Easily Obtaining Desired Information (Ranking) by Reordering in Ascending or Descending Order
Part view
Dragging and Dropping Specific Objects in the Graph
Selecting specific information or an object within the graph, dragging it beyond a certain distance triggers a magnetic effect on the item, providing detailed information
Four directional menu
Executing functions by mapping them to the corners of the screen in all four directions
Mapping app-specific features within the screen to accommodate diverse needs
Sorting
Selecting a desired area to gather and view only the graphs within that region
Reorganizing only the information within the selected area allows for quickly grasping filtered data
Search
Entering text on the screen to find items related to desired keywords
Within a graph offering abundant information, quickly filter by searching for the desired data
Bouncing
Visual hints aid in intuitively grasping information
Visual hint for cases where navigation or zooming is no longer possible
Undo/Redo
A feature enabling undo and redo using 'Previous' and 'Next' functions.
Regardless of depth and graph type, enabling seamless navigation to the previous and next screens
Zoom with square
Specifically zooming in on a section for easy viewing with numerical information
Selecting a specific area for quick access to desired detailed information

Defining Touch Interactions

Through the development of a diverse set of touch interactions, ranging from the most common one-finger tap

to two-finger and three-finger interactions, I proposed various possibilities for exploring chart information.

Touch Interaction SET

I categorized them into basic gestures and multi-finger gestures, enabling control over various features provided in the chart.

Multi-Finger Touch Gestures

Basic Touch Gestures

Tap
Double Tap
Long Tap
Double Tap
Drag & Drop
Zoom-In
Zoom-Out
Square
Hover
Cricle

Two Finger Tap
Two Finger
Double Tap
Two Finger
Long Tap
Two Finger Flick
Two Finger
Drag and Drop
Two Finger Rotate
Three Finger Rotate
Two Finger Circle

UI Definition & Use Flow

Touch Interaction Mapping: Planning Detailed Action Scenarios for Various Feature Lists

For a total of four graphs (Bar, Line, Pie, Radar), I have developed ideal usage scenarios by applying various feature lists and touch interactions.

Additionally, I considered useful and ideal touch interactions, along with elements of fun, by transforming charts into 3D during the scenario development process.