#1
LPO proposal via the persona technique (Google Analytics http://www.google.co.kr/intl/ko/analytics/)
In web analytics, the PDCA cycle matters (Plan → Do → Check → Action).
Criterion for choosing width size: through \"access analytics,\" identify the dominant screen resolution and browser share (1024, 1280).
#2
Relationship between A/B testing and SEO: analyze and model human behavior.
Whenever the page is displayed, vary the text or banner by user and time, and pick the variant that performs best.
Site problems → Usability
→ Marketing → Visitor types (analysis: visit keywords, A/B test)
→ Appropriate content (analysis: A/B test)
Case 1) image (0.28%) VS image + text (1.43%)
Case 2) emotional copy (8.33%) VS factual delivery (3.26%)
Soy CMS: approach the CMS not as a build tool but as a marketing tool.
→ Human behavior analysis, agonize < test, on the premise that even small copy has big influence.
#3
Visually impaired — fully blind:
- They use bump (braille) watches, but these break often // ISSEY MIYAKE's TO Watch (~KRW 1.2M)
Low vision (severe myopia): use magnifiers / ~KRW 3.5M
- High contrast, thick hands, high brightness contrast
- Stairs: gauge step height via brightness contrast between the black line on the side and the stair.
Various shampoos: tactile information is needed (braille, slashes, lid shape are the standards).
: Companies applying this: Biggrem, innisfree, Shiseido, DHC, L'Occitane
: JIS industry standard
Instructions should be recognizable \"regardless of shape, size, position, direction, color, or sound.\"
: Raise your hand VS clap your hands.
So, mobile or web:
Brightness contrast: Web 4.5:1 VS Mobile 3:1
Each font size should have an appropriate weight.
When an input box is empty, use a line to make the boundary recognizable.
Key screen information is defined by captions, color, audio, and summary.
Pagination active-state style has shifted: color → bold → underline → box → symbol.
Data should follow the reader's reading direction pattern:
rather than laying out content bundles arranged vertically side-by-side horizontally,
content bundles arranged horizontally stacked vertically is more appropriate.
Usability or accessibility:
Serving as communication between the visually impaired and the non-impaired — nearly every feature should be available in the same way as for general users.
Feature proxying: camera-magnifier,
FaceTime-remote chat / requests,
VoiceOver — reads the situation aloud even when taking photos.
No matter how good accessibility and usability are, without ongoing maintenance they can actually do harm.
(If you do well consistently and then, due to a construction / outage, service stops or support ends, the impression this leaves creates a huge ripple on the company — e.g. KakaoTalk's development issue around complying with the Anti-Discrimination Against Persons with Disabilities Act.)
#4
Why we adopt RWD? — Since 2012, large companies have started to prefer it.
— Recommended by Google (search SEO, UX)
— Easier to update information, lower operating costs
— Related companies: Sony, MS, NTT, baby-G.jp
— Facebook daily customers: they access from 700 different devices a day
for them to access, it has to be ideal.
— Size breakdown: mobile 3.5 inch, mini 7 inch, tablet 10 inch
— Internet Explorer 6: Japan (2.6%), Korea (1.4%)
— Mobile versions: iOS 5, 6; Android 2.3–4.x; Windows 8
— Mobile UI check points:
keep 44 × 44 px or larger (finger size)
css font size: 100%
use real-world metaphors
3-bar line's meaning = menu
new UI: Tuqulore.com
make the text/background contrast clear
#5
RWD's Essence
Apply media-query breakpoints
Flexible images: max-width: 100%, height: auto, line-height: 0;
The HIDMI (vector-based) era: SVG (logos and images), CSS visual effects (simple shapes and buttons), device and web fonts (text)
markup
Head — viewport
— format detection: telephone=no, address=no, mail=no
and home icon: favicon + apple-touch-icon (114x114)
— fluid auto (most boxes): for liquidity
— float: none (mobile layout = leaner layout)
— aggressive use of css3 selectors (can reduce the number of unnecessary classes)
— prevent font size from ballooning on landscape: -webkit-text-size-adjust: 100%
— change color on tap: tap-highlight
— hide address bar (1-pixel scroll)
— aggressive use of input types (search, tel, url, placeholder [dummy text])
— search input API voice search: x-webkit-speech
