Re: [csswg-drafts] [css-nav-1] Improve the distance function (#3384)

## Problem
When the spatial navigation is used for the real pages, there are unexpected behavior in UX point of view because of the distance function above.

### Case 1
The focus moves to the unexpected element with the smallest Euclidean distance but not aligned with the search origin in the navigation direction.
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-grid-001.html)

### Case 2
The focus moves to the unexpected candidate when there are multiple candidates which have the same Euclidean distance.
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-grid-003.html)

### Case 3
The focus moves to the unexpected candidate when the Euclidean distances of candidates are slightly different (about 1px), but the degree of alignment with the search origin are significantly different.
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-grid-align-002.html)

## Approach
The distance formula needs to change as below:

#### 1. Remove the factor about calculating the absolute distance in the navigation direction between a candidate and the search origin.
In _**Case 1**_, the aligned elements are more desirable element to gain the focus. But calculating the absolute distance in the navigation direction (B Factor of the distance formula in the spec) penalizes elements which are aligned, so it’s the reason for the unexpected behavior.

[See the test result](https://wicg.github.io/spatial-navigation/tests/ux/result.html#2-remove-redundant-distance-value)

#### 2. Add the factor about calculating the degree of alignment between a candidate and the search origin.

This aims to deal with the issues of _**Case 2**_ and _**Case 3**_.

As in _**Case 2**_, when there are multiple candidates which have the same Euclidean distance from the search origin, it's ambiguous to decide where the focus will move to.

To avoid ambiguity, the factor for calculating degree of alignment in the navigation direction between a candidate and the search origin is suggested.
It is calculated as

> **Factor** = **degree of alignment** * **alignWeight**
>
> **degree of alignment** = (length of the edge of the area of intersection between a candidate and the search origin / length of the edge of the search origin)

Also, considering _**Case 3**_, **alignWeight** is decided as `5`.

[See the test result](https://wicg.github.io/spatial-navigation/tests/ux/result.html#3-considering-the-degree-of-alignment)

## Summary of the proposal

The proposal is to change the distance formula in the spec as below.

### Distance formula = A - B + C - D

- **A**: The Euclidean distance between points
- **B**: The degree of alignment in the navigation direction between a candidate and the search origin
  - Align weight: 5
- **C**: The absolute distance in the direction which is orthogonal to the navigation direction between points
  - Orthogonal weight for LEFT and RIGHT direction: 30
  - Orthogonal weight for UP and DOWN direction: 2
- **D**: The square root of the area of intersection between the boundary box of a candidate and the search origin

### General rules of proposed formula

- A Factor has a decisive effect on the final value of the distance formula. 
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-grid-align-004.html)
- If the values of D factor is 0, and the values of A Factor are the same, select the candidate which has the largest value of B Factor. 
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-grid-001.html)
- If the values of C factor is 0, and the values of A Factor are slightly different (1px), select the candidate which has the largest value of B Factor. 
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-grid-align-002.html)
- If the value of D Factor is more than 0, then the value of A Factor is always 0 and select the candidate which has the largest value of D Factor. 
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-intersected-002.html)
- If there are multiple candidates which have the final value of the distance formula, select the first element in the DOM order. 
e.g.) [Related test case](https://wicg.github.io/spatial-navigation/tests/ux/spatnav-distance-function-grid-002.html)

More information can be found [here](https://wicg.github.io/spatial-navigation/tests/ux/result.html).

-- 
GitHub Notification of comment by jihyerish
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3384#issuecomment-459628932 using your GitHub account

Received on Friday, 1 February 2019 07:11:44 UTC