도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

[웹디자인] 당신이 잊기 쉬운 중요한 50가지 요소 [최종 합본]

웹디자인, 기획관련 자료를 찾던중 좋은 자료를 찾아 번역 공유합니다.

원래는 1개의 글로 작성되어 있지만, 저의 개인적인 시간문제로 인하여 6편으로 나눠서 연재를 하였습니다.

이 글은 6개의 연재를 합본으로 다시 작업 하였습니다.

- 1편: Login & Signup stuff (1~5)

- 2편: First Experience (6~10)

- 3편: All the Little Things (11~25)

- 4편: Launch Materials (26~35)

- 5편: Profile Stuff (36 ~ 40)

- 6편: Mad Flows - (40 ~ 50)

- 최종 합본


우리는 때때로 뭔가를 디자인하는 것을 잊어 버립니다

글쎄, 이건 좋지 않아 ...하지만 ... 괜찮아.

이런일은 늘 일어납니다.

이것은 단지 여러분이 디자인하는 것을 잊어 버릴수 있는 것들의 목록입니다. 인스타그램이나 Snapchat 같은 앱이 얼마나 간단한지 생각해 보면, 얼마나 많은 Screen, States, 그리고 Stuff들이 정말로 멋진 사용자 경험을 만들어 내는지에 대해 간과하기 쉽습니다.


Login & Signup

1. The Splash Screen

모바일 앱을 실행하거나 웹 앱에 로그인하여 모든 것이로드(Loading) 될 때 표시되는 화면.


Here's a beautiful one by James Jackson


2. 비밀번호 흐름을 잊어 버렸습니다.

"abcd1234"또는 "1234abcd"입니까? 이건 중요하다. 잊지 마라.


Majo Puterka doesn't leave his users locked out of the house in the rain

3. "Thanks for Signing Up"페이지

이 화면은 일반적으로 사용자가 계정을 생성하고 이메일 주소를 확인하도록 요청한 후에 발생합니다.


What's Next? Ask Hayley Cattin

4. 환영 전자 메일

이것은 제품 디자인과 제품 마케팅의 경계를 넘나 드는 것이지만 문자 그대로 사용자에게 가장 먼저 드러내는 인상입니다. 제품을 깔끔한 음색으로 소개하는 좋은 시간입니다.


iReally like this. By Brian Golatka

5. 서비스 약관 및 개인 정보 페이지

그냥 합법적인 사람들을 위해 이것을 하십시오. 그들은 단지 고소를 피하려고합니다.


I really appreciate how Marko Prljic tried to make the Terms & Conditions more approachable




First Experience

6. The User Onboarding

사용할 수 있는 아주 많은 다양한 방법이 있습니다. 여기 저의 즐겨 찾기 다섯개가 있습니다 :


Delightfully helpful, by MuNa


7. The Out-of-the-Box Empty State(s)

이것은 집으로 이사하는 것과 같고 아직 어떤 가구도 옮기지 않았습니다. 꽤 비어있는 것 같은데? 사용자에게 올바른 방향으로 안내해줌으로써 사용자를 도와주세요. "여기 소파를 놓으세요."


I get the feeling Veli-Johan Veromann likes superheroes

8. The Help Docs

당신이 큰 회사에 있다면, 아마 전체 팀이 이것(도움말)에 전념 할 것입니다. 그러나 그들은 여전히 그림과 스크린 샷으로 당신을 괴롭 히고 있습니다. 이것은 로그인 페이지 또는 활동 피드만큼 많은 (또는 그 이상) 노력을 해야합니다.


Maya Gao is very helpful. Be more like Maya

9. The Default User Profile Image/Avatar

그라 바타 (Gravatar)와 같은 소셜 계좌 또는 서비스에 가입하면 웃고있는 얼굴을 과시 할 수 있었지만 여전히 프로필 사진을 업로드하지 않는 사람들이 있습니다. 약간의 천재성을 부여하고 브랜드를 과시하십시오.


Hermes Strange makes cute stuff. These are cute AF

10. The Logout Button

아쉽지만, 사용자가 떠나는것을 허용해야합니다. 공공 도서관에서 앱을 사용하고, 로그 아웃을해야 합니다. 낯선 사람이 자신의 계정 이름을 'Mr. 꽁초 ". 처럼 부적절하게 사용 할 수 있습니다. :)


I'm guessing Kristofer probably stole Henrik's Lunch money. Let him log out and flee the scene

All The…Small Things

11. The App Footer [Footer]

대부분의 시간 동안 사람들은 세상이 평평하다고 믿었을 때와 같이 페이지가 계속 영원히 계속한다고 가정합니다. 참고 : 지구는 평평하지 않습니다.


Ash Schweitzer might be lost in the woods somewhere. Someone help her
애쉬 슈바이처 (Ash Schweitzer)는 어딘가 숲에서 길을 잃을 수도 있습니다. 누가 그녀를 도와주세요

12. The Browser Favicon [파비콘]

브라우저 탭에 나타나는 작은 아이콘. 더 이상 초록색이 아니므로 계속 Medium 탭을 잃어 버립니다. 하지만 이쁘긴해요!


Michael Flarup는 당신이 다운로드 할 수있는 멋진 favicon 템플릿을 만들었습니다


13. The 404 Page


Rizvan is stuck in that hole. Go help her
Rizvan은 그 구멍에 갇혀 있습니다. 그녀를 도와주세요

14. The Default/Hover/Focus/Pressed/Disabled/Etc. Input States

엄청 많은 상태들. "Focus + Hover"는 내가 가장 좋아하거나 가장 모호한 것일 수 있습니다. 아래 스크린 샷은 UX Power Tools Design System에서 가져온 것입니다.



내 사이드 ​​프로젝트에 대한 메모, 당신은 확실히 이것을 확인해야 합니다 :


15. The Tab Order [탭 순서]

탭 주문은 사용자가 Tab 키를 사용하여 페이지를 탐색 할 수있게 해주는 접근성 기능입니다. 나는 이것을 표현할 이미지를 찾을 수 없었습니다. 그래서 Christian Beck이 2007 년에 썼던 스펙의 스크린 샷을 가져 와서 테이블의 각 UI 컨트롤에 대한 테이블의 탭 순서 위치를 정의했습니다. SnoozeFest 2017 ™). 기본 작업이 보조 작업보다 먼저 수행되도록 항목을 방문하는 순서를 실제로 정의 할 수 있습니다. 이것은 깔끔한 디자인 도전입니다.


Ahhh, the days of writing 80-page spaces and waterfall development
아, 80 페이지 분량의 공간을 만들고 폭포수를 개발 한 시대

16. The Scrolling Behavior [스크롤링 동작]

어디서 어떻게 스크롤되는지 알려주기만 하는게 아니고 실제 스크롤 화면이 필요합니다. 헤더가 고정되어 있습니까? Footer는요?


Oh man, Peter Blazej, this feels smooth, Nice!
이런, 피터 블레이즈,이 느낌이 부드럽 네, 좋았어!

17. The Intercom Button [인터콤 버튼]

적어도 당신이 할 수있는 일은 당신의 앱 색상과 일치시키는 것입니다. 여러분 방문하십시오. 이건 로켓 수술이 아니에요.


이것은 시리얼 한 그릇을 만드는 것보다 쉽습니다

18. The Pagination Buttons [페이지 매김 버튼]

무한 스크롤을 선택하지 않았다면 사용자는 27 페이지로 이동할 수있는 방법이 필요합니다.


Borunda did a nice job. Love that yellow, Borunda!


Borunda 굿잡! 노란색, Borunda 사랑해!

19. The Cursors [커서]

버튼에는 포인터가 있어야합니다. Non-interactive 항목에는 기본 커서가 있어야합니다. 텍스트에는 텍스트 커서가 있어야합니다. 개발자는 항상 이것을 알지 못합니다. 어떤 개발자는 텍스트 커서를 버튼의 마우스를오버 상태에적용 했습니다. 너그러움이 필요합니다...

Jeff Borderick LOVES clicking on stuff. He also made a freebie
Jeff Borderick는 물건을 클릭하는 것을 좋아합니다. 그는 또한 공짜 버전을 만들었습니다

20. The Table Sort/Filter/Search Mechanism(s) [테이블 정렬 / 필터 / 검색 메커니즘]

"Beards with Bands"데이터 테이블에서 ZZ Top으로가는 더 빠른 방법이 있어야합니다 ...


Eugen Esanu has an exceptional eye for filtering mechanisms, and purple/yellow combos. Nice
Eugen Esanu는 필터링 메커니즘과 자주색 / 노란색 조합에 대한 뛰어난 눈을 가지고 있습니다. 나이스!

21. The “No Results” Empty States ["결과 없음"빈 상태]

때로는 무언가를 검색하거나 너무 많은 필터를 추가하고 결과가 없습니다. 얼마나 슬픈일인가.... 건방진 일러스트레이션으로 사용자를 격려해주십시오.


Reiner Wendland pretty much covered everything for Zendesk
Reiner Wendland는 Zendesk의 모든 것을 거의 다 다루었습니다

22. The Error States [오류 상태]

입력이 잘못되었습니다. 잘못된 비밀번호. 기존 계정!! 너무 많은 것을 선택했습니다. 등등등... 상황이 잘못 될 수있는 모든 종류의 방법이 있습니다. 특히 내가 할머니이고 크리스마스 용 iPad를 가지고 있다면. 그건 실수 였어!!!!


Mike Stezycki really had me thinking that email got sent. Then he was all: 😦
Mike Stezycki는 정말로 전자 메일이 전송되었다고 생각했습니다. 그게 다였다 ㅠㅠ

23. The System Notifications [시스템 알림]

시스템은 커튼 뒤에서 항상 무언가를하고 있으며 때로는 일이 성공적으로 끝났을 때 (또는 실패 했을 때)를 아는 것이 좋습니다. 분명히 사용자에게 알려야합니다.


This is from Google Inbox. The “Undo” is really convenient when you “accidentally” delete an email from your mom
Google Inbox에서 가져온 것입니다. '실행 취소'는 엄마가 실수로 이메일을 삭제할 때 편리합니다

24. The Empty Autocomplete Dropdown [빈 자동 완성 드롭 다운]

자동 완성 기능은 시스템에서 객체를 찾는 데 도움이되지만 때로는 결과가 없습니다. 이 경우 빈 상자 만 있으면 됩니다. 작은 메시지를 보여 주거나 일종의 행동을 취하도록 허용하십시오.


Apparently Jurriaan van Drunen didn’t have “Bra” in his contacts already. Probably for the best
명백하게 Jurriaan van Drunen은 이미 그의 브래지어에 "브래지어"가 없었습니다. 최고를 위하여..

25. The Loading State [ 로딩 상태]

물론, 페이지가 로드 되는 동안 사람들은 휴대 전화에서 Tindering을 하고 있을 것입니다.하지만 실제로 섹시한 스와이프를 들여다 보면, 여전히 데이터가 로드되고 있다는 시각적 표시가 있어야합니다.


Not the best pan flip form, XPLAI. Keep practicing. But this is still painfully adorable


최고의 팬 플립 양식, XPLAI가 아닙니다. 계속 연습 해. 그러나 이것은 여전히 고통스럽게 사랑 스럽다

Launch Materials

26. The Friggin’ App Icon [앱 아이콘]

이걸 잊지 않아야 합니다!!


I’m willing to bet Eddie Lobanovskiy changed all of his icons to breakfast foods. Delicious
나는 Eddie Lobanovskiy가 자신의 모든 아이콘을 아침 음식으로 바꾸었다고 생각합니다. 맛있겠다.

27. The App Store Images [앱 스토어 이미지]


Daniel Beere didn’t forget the app store images for his app. High five, dude
Daniel Beere는 자신의 앱에 대한 앱 스토어 이미지를 잊지 않았습니다

28. The Open Graph/Social Images

이것은 트위터에서 링크를 트윗하고, 페이스 북에서 게시물을 만들고, 등등.. 매체에 링크를 게시 할 때 표시되는 이미지입니다.


Kristy T is officially carless. SF will do that to ya
Kristy T는 공식적으로 carless입니다

Medium의 모습은 다음과 같습니다 :


29. The Website Marketing Images [웹 사이트 마케팅 이미지]

잊지 마세요! 아마 웹 사이트를 Stripe처럼 보이게 만들고 싶을 것입니다. 정확히 이것을 복사하십시요! :


And if you’re a designer at Redkix, you’ll have to make sure that image works on crimson
Redkix의 디자이너 인 경우 이미지가 진홍색으로 작동하는지 확인해야합니다

30. The Sales Deck Images [판매 이미지]

You’re probably good if you handle the one above. But in this case you’ll probably need to scrub content to match the brand of whatever 6-figure deal your brilliant sales team is working on.

당신이 이것을 처리 한다면 좋습니다. 그러나 이 경우에는 훌륭한 판매 팀이 진행하고있는 6 자리 숫자 거래의 브랜드와 일치하도록 콘텐츠를 스크럽해야 할 수 있습니다.(번역 도와주세요 ㅋ)


Oh and sales will probably cover up all your mockups with other stuff, so prepare for that

세일즈는 아마도 당신의 모든 목업들과 다른 것들을 매워 줄 것이다. 그래서 준비 해야한다

31. The Pitch Deck Images [피치 데크 이미지]

피치 데크 이미지와 비슷하지만 조금 더 환상적입니다. 내 말은 ... 당신이 돈을 모으려고한다는 겁니다. 나중에 가능하게 만드는 방법을 설명 할 것입니다


Here’s a trade secret, always put dashboards in your pitch deck. 🦄 This is not a joke
영업 비밀은 항상 대시 보드를 피치 데크에 넣습니다. 🦄 이것은 농담이 아닙니다

32. The Product Hunt Images

안녕하세요. 프로필 페이지도 업데이트되었습니다.


I still miss Medium 2.0 but every 👏 I 👏 get 👏 helps 👏 me👏 move 👏 on
나는 아직도 Medium 2.0이 그립지만, 👏 나는 👏을 얻는다

33. The Facebook/Twitter Ad Images [Facebook / Twitter 광고 이미지]

"하지만 우리는 페이스 북 광고를 실행하지 않습니다!"하하, 당신까지. 그리고 아무도 당신에게 알려주지 않습니다. 그래도 미리 만들어두면 안전할거야.


It took some digging to find an ad that WASN’T for a Casper Mattress. Y’all killin’ the game, Caspe
캐스퍼 매트리스가 아닌 광고를 찾기가 어려웠습니다. 캐서퍼,죽고 죽이는 게임.

34. The Social Media Profile Images [ 소셜 미디어 프로필 이미지]

네, 모든 938 개의 소셜 네트워크에 대한 이미지를 하나를 만들어야합니다. 고맙게도 우리는 당신을 위해 그것을 빠르게하는 Sketch 도구를 만들었다.

 Y'welcome, kiddos.


35. The Launch Email Banner [이메일 배너]


Triple points if you make it an illustration. Current
일러스트레이션을 만들면 세가지의 포인트가 있습니다

Profile Stuff [프로필 항목]

36. Notification Preferences [알림 환경]

앱에서 나에게 알림이 표시되고 나팔 소리가 들리면서 알림이 표시되면 더 멋지겠지요. 그러나 19번이 지나면, 당신은 정말 나팔소리에 질려 버립니다. 나팔 소리가 나는 시점을 사용자가 결정 하도록 해야 합니다.


Slack didn’t become an $8 billion company by slacking on notification settings!! Nailed it
슬랙 (Slack)은 알림 설정을 사용자가 결정 하도록 지원 안해서, 80 억 달러 규모의 회사가되지 못했습니다 !

37. The Billing Page [청구서 수신 페이지]

당신에게 수천 달러를 지불하고있는 사람들이 당신의 제품을 사용하기 위해 청구서 사본을 가져와야한다는 사실을 잊지 마십시오. 그리고 어떤 사람들은 그들의 에이전시를 위한 바보같은 IT 부서를 구성한다. 이것을(청구서 수신페이지) 찾는 것이 얼마나 어려운지... 매 달...


I don’t know what any of this means, but it was easy to get here
나는 이것이 무엇을 의미하는지 모르지만, 여기는 찾기가 쉽다

38. The “Delete My Account” Option ["내 계정 삭제"옵션]

맞아, 알아. 아무도 이것을하지 않을 것입니다. 그러나 어쩌면 그들은 언젠가 새로운 계정을 다시 시작할 것 입니다! 쇼핑몰 가판점에서 나오면서 "나중에 다시 와서 3 개를 살거야!"라고 말하는 사람들과 마찬가지로.

긍정적인 정당한 사유가 있습니다. 더 큰 팀 라이센스로 병합 할 때 계정을 삭제했습니다. 나는 먼지가 쌓인 오래된 계정을 삭제하고 신선한 시작하고 싶었다. 어쨌든 좋은 경험이 되도록하는 것이 좋은 고객 서비스입니다.


Pssst, Mr. President, you can de-activate your account here
각하, 귀하의 계정을 비활성화 할 수 있습니다

39. The Profile Photo Cropping Tool [프로필 사진 자르기 도구]

음, 대부분의 앱에 쓰레기통의 악몽 같은 시나리오이며 꼭 그런 것은 아닙니다. 나는 Christian이 그의 프로필 사진을 비욘세로 바꿀 때 거절 당한 화면캡쳐사진을 받았습니다.


He couldn’t even get past this screen to show how it cropped a photo. 2 out of 10 stars. Would not put a ring on it
그는 심지어 사진을 자르는 방법을 보여주기 위해 이 화면을 지나칠 수 없었습니다. 별 10개 중 2개. 사용 안할꺼야!

40. The “Upgrade My Account” Option/Flow ["내 계정 업그레이드"옵션 / 플로우]

이것은 많은 SaaS 제품에 대해 얼마나 어려운지 내 마음을 어렵게 합니다. 닥치고 내 돈을 가져가. 이게 쉽지 않을까요?! 이름 :처럼 ... 쉽지?!


Buffer has a menu item to upgrade then a pretty simple form. Bam. You’ve got my money. Way to go, Buffer
버퍼에는 업그레이드 할 수있는 간단한 메뉴 항목이 있습니다. 베에엠~!. 너는 내 돈을 받을 자격이 있어!


Mad Flows

당신은 이전의 모든 일을 끝내고 집에 편안히 있다고 생각할 것입니다. 그러면 모든 일을 마치고 집에 가는길에 자신 스스로 얼마나 자랑스러워할까요

집에 가능 길 중간쯤에서 커피를 마시며, 실제로 개발이 아직 시작도되지 않았다는 것을 기억하십시오! # $ % @

일단 개발이 시작되면, 한 화면을 Mockup하는 것만으로는 실제로 모든것을 설명 할 수 없다는 것을 깨닫게 될 것입니다. (멋진데, 우리는 모두 게으르려고 노력합니다). 개발자는 실제로 사용자 경험이 화면에서 화면으로 어떻게 이동하는지 분석해야합니다.

41. The “Change My Address” Flow ["내 주소 변경"]

시내에 멋진 아파트가 생기면 언제든지 소유 한 모든 신용 카드 주소를 변경해야합니다.


Dhaval S. Gandhi wants to make sure his Aloe Vera is shipped to the right place
Dhaval S. Gandhi는 알로에 베라가 올바른 장소로 배송되는지 확인하려고합니다

42. The “Add A Credit Card” Flow ["신용 카드 추가"]

어떤 사람들 (나....)은 수백 개의 신용 / 직불 카드를 파일에 보관하여 도둑이 선택할 수 있도록 계좌정보들이 많습니다. 카드정보를 쉽게 추가 할 수 있도록하십시오. 그것에 대해 내가 정말로 말해야 할 것이 전부입니다.


This looks way too real, Carlos Medina. Unrelated, I just bought some new shoes and it didn’t cost a dime!
이것은 너무 현실적인 것처럼 보입니다, 카를로스 메디나.
비 관련, 나는 지금 막 몇몇 새로운 구두를 사고 그것 한푼도 들지 않았다

43. The “Bulk Add” Flow ["일괄 추가"]

시스템에 객체를 신속하게 추가하는 것이 하나의 방법이지만, 신속하게 시스템에 객체 묶음을 추가하는 것은 완전히 다릅니다.


Please sir, may I have some more?
제발, 좀 더 가져갈 수 있을까요?

44. The “Create a Custom Filter” Flow

정교한 필터링을 허용하는 경우, 나중에 복잡한 필터를 저장할 수 있는 기능을 추가하는 것이 좋습니다. 그렇게하면 수백만 번을 다시 클릭 할 필요가 없습니다


Oykun Yilmaz could take this one step further by allowing the user to save this filter. Do it, Oykun!
Oykun Yilmaz는 사용자가이 필터를 저장할 수 있게함으로써 이 단계를 더 진행할 수 있습니다. 그것을해라, Oykun!

45. The “Add to Shopping Cart” Flow ["장바구니에 추가"]

사람들이 이 흐름을 잊어 버렸다고 생각하는 것은 다소 재미 있지만 알다시피 ... 나는 그 사람들 중 하나입니다. 입 닥쳐!


Apparently Alberto Conti needed 4 chairs and 4 side tables. Must be a big house..
Alberto Conti는 4 개의 의자와 4 개의 사이드 테이블이 필요했습니다. 반드시 큰 집이되어야합니다..

46. The “Share This” Flow ["공유"]

공유는 온라인으로 보편화되었지만, 이것이 당신을 위해 설계된 것은 아닙니다. 이 일에 약간의 시간을 할애해야 할 이유가 더 있습니다


Tomek Kwiatkowski really knows how to get social
Tomek Kwiatkowski는 실제로 사회를 얻는 방법을 알고 있습니다

47. The “Create from Existing” Flow

이것은 일종의 "복재 + 수정"(Duplicate + Edit)과 같은 것입니다. 기본적으로 사용자는 기존 개체에서 시작하여 필요에 따라 업데이트 할 수 있습니다.


Kyle Johnston is writing a LOT of scripts. Maybe secretly Christopher Nolan?
카일 존스턴 (Kyle Johnston)은 많은 스크립트를 작성하고 있습니다. 몰래 크리스토퍼 놀란?

48. The “Invite Someone” Flow ["누군가 초대하기"]

초대장 및 공유를 통해 제품에 "virality"을 추가하는 더 좋은 방법은 없습니다. Dribbble을 보면서. 쉽고 빠르며 재미 있는지 확인하십시오!


I think Paula Pintaric and Christine are going on a flight. Or they’re working on a project and watching other people fly. That’s worse
나는 Paula Pintaric과 Christine이 비행기를 탈 것이라고 생각한다
또는 프로젝트를 진행하고 다른 사람들이 날아 다니는 것을 지켜보고 있습니다
그것은 더 나쁘다

49. The “Change User Permissions” Flow ["사용자 권한 변경"]

Greg 아시죠? 그가 만지는 모든 것을 어떻게 망쳐버릴지 알지? 예, Greg의 특권 중 일부만 해지하고 인터넷 전체를 삭제하지 않을 수도 있습니다. 바보 Greg.


Matt Shwery, on the other hand…much less of a knucklehead than Greg
Matt Shwery, 다른 한편으로는 ... Greg보다 훨씬 적은 너클 머리

50. The “Delete and Recover” Flow ["삭제 및 복구"]

당신이 뭔가 중요한 것을 삭제하고 그것을 즉시 되 찾을 필요가있을 때를 압니까? 아니? 모르죠...ㅋ


Eric Tsai understands that we all make mistakes
Eric Tsai는 우리 모두가 실수를 저질렀다고 이해합니다.

BONUS #51. Animations [BONUS # 51. 애니메이션]

나는 실제로 자신에 대해 잊어 버렸습니다. 이봐 요, 저는 애니메이션을 좋아하지만 판매가 어제의 프로토 타입을 원할 때 이것을 구축 할 수있는 사치가 있으면 행운이고, 개발은 방문 페이지의 8 번째 반복에서 완전히 놓친 것을 지적하고 있습니다. 그리고 솔직히 우리가 애니메이션에 들어가면, Dribbble이나 CodePen을 살펴보고 내가 좋아하는 것을 보내서 "좋아요!"라고 말합니다. 내가?

난 아니지만..


- 1편: Login & Signup stuff (1~5)

- 2편: First Experience (6~10)

- 3편: All the Little Things (11~25)

- 4편: Launch Materials (26~35)

- 5편: Profile Stuff (36 ~ 40)

- 6편: Mad Flows - (40 ~ 50)

- 최종 합본

원본링크입니다.


리뷰