이건 자주 다시 보게 됨. 포스터형 디자인도 좋고, 이런 ‘법칙’들 상당수가 오랜 기간 Nielsen Norman Group의 데이터와 연구에서 나온다는 점이 늘 놀라움 Jakob's Law나 Norman Door처럼 이름이 붙은 UX 개념도 많고, UX 업계가 이 작은 관찰자 집단의 영향력을 크게 받고 있음
다만 내 생각엔 현대 UX/HCI 이론이 이런 부드러운 규칙들에 점점 발목 잡히는 면도 있음. 특히 방송 같은 비상호작용 매체의 사용자 패턴에서 드러난 규칙을 너무 일반화하는 듯함
이전 시리즈 페이지는 좋았는데, 이번 건 좀 성의가 부족해 보임
예를 들어 Cognitive Bias를 사전식으로 정의만 해놓고 ‘법칙’처럼 올려둔 건, 법칙도 아니고 저 형태로는 실용적인 개념도 아님
UI 디자이너나 개발자가 적용할 수 있는 규칙 모음이라기보다, 용어 몇 개 골라 정의 붙여서 포스터 판매용으로 묶은 느낌이 더 강함
이런 자료는 좋고, 당연히 절대불변 규칙도 아님
전통적인 디자이너가 아니라서 이런 best practice나 법칙 모음이 있으면 도움이 큼. 머릿속에 계속 들고 있기 어려운 규칙들을 AI가 화면 단위로 한꺼번에 점검해주는 출발점으로는 딱 좋아 보임
개인적으로는 소스코드 포맷팅 단축키처럼, 비즈니스 소프트웨어를 만들 때 이런 법칙 세트를 sanity check 용 단축 흐름으로 쓰면 꽤 유용하다고 봄
실제로 UX Laws 스크린샷과 대시보드 스크린샷을 내려받아서, ChatGPT와 Claude에게 그 법칙 기준으로 리뷰하고 추천사항을 반영한 새 목업을 만들어보라고 시켰음
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: https://swellslots.com의 서프 예보 앱
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
적어도 Project 1은 새 대시보드보다 예전 대시보드가 더 나아 보임
이런 식으로 서로 충돌하는 법칙 집합의 문제는, 좋은 디자이너는 어떤 규칙을 무시하고 어떤 규칙을 쓸지 맥락에 맞게 직감적으로 판단한다는 데 있음
첫 번째 프로젝트는 기존 대시보드는 보고용 관리자 화면 같고, 새 대시보드는 실제로 티켓을 처리하는 실무자 화면처럼 보임
프롬프트에 목적이나 역할을 구체적으로 넣었는지, 아니면 열어둔 채로 돌렸는지 궁금함
영국에서는 Imgur 접근 제한 때문에 이미지가 안 열림
법칙 0번은 내가 클릭하려는 UI 요소를 리플로우시키거나 이리저리 움직이지 말라는 것임
이건 정말 사람 미치게 만듦. UX나 프런트엔드 쪽에서 진지하게 다루지 않는 한, OS나 브라우저 차원에서 사용자의 반응 속도에 맞춰 예를 들어 20ms 전의 클릭 가능 상태를 추적해서, 내가 누른 대상이 뇌가 인식한 그 대상이 되게 할 수 없을까 늘 궁금했음
물론 더 나은 해법은 개발자와 디자이너가 이런 디테일에 장인정신과 자부심을 갖는 것임. 최악의 인터페이스들을 보면 대개 백엔드와 기가비트 연결된 환경에서만 테스트해서 이런 문제를 놓친 듯함
이 문제가 iOS Photos 앱에도 들어갔다는 게 황당함
디자인의 상징처럼 여겨지는 회사가 그 기본조차 놓친다면 업계 어딘가가 크게 잘못된 것임
Google Search가 특히 최악임. 쓸데없는 People also ask와 생성에 한참 걸리는 Gemini 답변이 전체 콘텐츠를 아래로 밀어버림
불필요하고 무관한 장식 그래픽으로 주의를 흐리지도 말아야 함
이건 훌륭한 자료라고 봄
다만 2번 항목인 Choice Overload를 보면, 선택지가 너무 많으면 사람이 압도된다고 해놓고 정작 페이지에는 30개의 ‘법칙’을 전부 텍스트로 묻어두고, 시각 공간 절반은 무관한 그림 30개가 차지하고 있음
예쁘긴 하지만, 이걸 학습하기 좋은 구조는 아님
Doherty Threshold처럼 컴퓨터와 사용자가 서로 기다리지 않을 정도인 400ms 이하로 상호작용하면 생산성이 크게 올라감
그래서 프로그래밍할 때는 작은 모델을 훨씬 선호함. 속도가 충분히 빨라서 작업 흐름이 실시간성을 유지함
그러면 일도 더 작은 단위로 쪼개고 계속 검증하게 돼서, 내가 능동적으로 관여하게 되고 멘탈 모델도 어긋나지 않음
예전에 간단한 코드 변경 3개를 큰 모델과 작은 모델에 각각 맡겨봤는데 둘 다 성공했음. 그런데 큰 모델은 3배 느리고 비용은 10배 들었음
그때부터 내 Best Model 기준은 벤치마크 1등이 아니라, 실제 일을 안정적으로 해내는 가장 작고 빠르고 싼 모델로 바뀌었음
안정성도 넣으면 좋겠음. 변화를 위한 변화나 새 유행을 따른다고 계속 바꾸지 말아야 함
의미 없는 아이콘은 쓰지 말아야 함
정보를 트리처럼 숨겨서 사용자가 박스를 하나하나 열게 만들기보다 선형 흐름으로 보여주는 편이 나음
의견을 사실인 것처럼 제시하지도 말아야 함
아시아의 대형 e-commerce 플랫폼 하나를 리디자인할 때, 여기 있는 법칙 여러 개를 실제 UX 전략에 활용했음
공유해줘서 고마움. 거의 10년 동안 full stack으로 일했는데, 이제야 UI를 더 깊게 파고 있고 UX는 아직 표면만 건드린 수준임
약간 딴 얘기지만, 모바일이나 웹앱에서 자주 쓰는 UI 패턴을 정리해둔 자료가 있는지 궁금함. 예를 들면 hamburger menu, toast notification 같은 것들임
체계적으로 정리돼 있고, 범위가 넓고, 시각 예시까지 있는 사이트를 찾고 있음
Hacker News 의견들
이건 자주 다시 보게 됨. 포스터형 디자인도 좋고, 이런 ‘법칙’들 상당수가 오랜 기간 Nielsen Norman Group의 데이터와 연구에서 나온다는 점이 늘 놀라움
Jakob's Law나 Norman Door처럼 이름이 붙은 UX 개념도 많고, UX 업계가 이 작은 관찰자 집단의 영향력을 크게 받고 있음
다만 내 생각엔 현대 UX/HCI 이론이 이런 부드러운 규칙들에 점점 발목 잡히는 면도 있음. 특히 방송 같은 비상호작용 매체의 사용자 패턴에서 드러난 규칙을 너무 일반화하는 듯함
이전 시리즈 페이지는 좋았는데, 이번 건 좀 성의가 부족해 보임
예를 들어 Cognitive Bias를 사전식으로 정의만 해놓고 ‘법칙’처럼 올려둔 건, 법칙도 아니고 저 형태로는 실용적인 개념도 아님
UI 디자이너나 개발자가 적용할 수 있는 규칙 모음이라기보다, 용어 몇 개 골라 정의 붙여서 포스터 판매용으로 묶은 느낌이 더 강함
이런 자료는 좋고, 당연히 절대불변 규칙도 아님
전통적인 디자이너가 아니라서 이런 best practice나 법칙 모음이 있으면 도움이 큼. 머릿속에 계속 들고 있기 어려운 규칙들을 AI가 화면 단위로 한꺼번에 점검해주는 출발점으로는 딱 좋아 보임
개인적으로는 소스코드 포맷팅 단축키처럼, 비즈니스 소프트웨어를 만들 때 이런 법칙 세트를 sanity check 용 단축 흐름으로 쓰면 꽤 유용하다고 봄
실제로 UX Laws 스크린샷과 대시보드 스크린샷을 내려받아서, ChatGPT와 Claude에게 그 법칙 기준으로 리뷰하고 추천사항을 반영한 새 목업을 만들어보라고 시켰음
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: https://swellslots.com의 서프 예보 앱
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
이런 식으로 서로 충돌하는 법칙 집합의 문제는, 좋은 디자이너는 어떤 규칙을 무시하고 어떤 규칙을 쓸지 맥락에 맞게 직감적으로 판단한다는 데 있음
프롬프트에 목적이나 역할을 구체적으로 넣었는지, 아니면 열어둔 채로 돌렸는지 궁금함
법칙 0번은 내가 클릭하려는 UI 요소를 리플로우시키거나 이리저리 움직이지 말라는 것임
물론 더 나은 해법은 개발자와 디자이너가 이런 디테일에 장인정신과 자부심을 갖는 것임. 최악의 인터페이스들을 보면 대개 백엔드와 기가비트 연결된 환경에서만 테스트해서 이런 문제를 놓친 듯함
디자인의 상징처럼 여겨지는 회사가 그 기본조차 놓친다면 업계 어딘가가 크게 잘못된 것임
이건 훌륭한 자료라고 봄
다만 2번 항목인 Choice Overload를 보면, 선택지가 너무 많으면 사람이 압도된다고 해놓고 정작 페이지에는 30개의 ‘법칙’을 전부 텍스트로 묻어두고, 시각 공간 절반은 무관한 그림 30개가 차지하고 있음
예쁘긴 하지만, 이걸 학습하기 좋은 구조는 아님
Doherty Threshold처럼 컴퓨터와 사용자가 서로 기다리지 않을 정도인 400ms 이하로 상호작용하면 생산성이 크게 올라감
그래서 프로그래밍할 때는 작은 모델을 훨씬 선호함. 속도가 충분히 빨라서 작업 흐름이 실시간성을 유지함
그러면 일도 더 작은 단위로 쪼개고 계속 검증하게 돼서, 내가 능동적으로 관여하게 되고 멘탈 모델도 어긋나지 않음
예전에 간단한 코드 변경 3개를 큰 모델과 작은 모델에 각각 맡겨봤는데 둘 다 성공했음. 그런데 큰 모델은 3배 느리고 비용은 10배 들었음
그때부터 내 Best Model 기준은 벤치마크 1등이 아니라, 실제 일을 안정적으로 해내는 가장 작고 빠르고 싼 모델로 바뀌었음
안정성도 넣으면 좋겠음. 변화를 위한 변화나 새 유행을 따른다고 계속 바꾸지 말아야 함
의미 없는 아이콘은 쓰지 말아야 함
정보를 트리처럼 숨겨서 사용자가 박스를 하나하나 열게 만들기보다 선형 흐름으로 보여주는 편이 나음
의견을 사실인 것처럼 제시하지도 말아야 함
아시아의 대형 e-commerce 플랫폼 하나를 리디자인할 때, 여기 있는 법칙 여러 개를 실제 UX 전략에 활용했음
공유해줘서 고마움. 거의 10년 동안 full stack으로 일했는데, 이제야 UI를 더 깊게 파고 있고 UX는 아직 표면만 건드린 수준임
약간 딴 얘기지만, 모바일이나 웹앱에서 자주 쓰는 UI 패턴을 정리해둔 자료가 있는지 궁금함. 예를 들면 hamburger menu, toast notification 같은 것들임
체계적으로 정리돼 있고, 범위가 넓고, 시각 예시까지 있는 사이트를 찾고 있음
당시엔 스마트폰 초기라 모바일 비중이 적었지만, 최신 판은 모바일도 많이 다루는 듯함
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/