와이어프레임은 low-fi, mid-fi, high-fi 와이어프레임으로 나눌 수 있다고 하셨는데 보통 실무에서 와이어프레임을 만들어달라고 요구하는 이유는 대략적인 콘텐츠들의 배치나 화면의 흐름을 보기위함인가요? 대학교에서 관련 프로젝트를 진행하게 되면서 pm분께서 저에게 gui를 완성해달라고 하셨어요. 지금까지 저는 gui가 ’버튼이나 아이콘, 혹은 삽입되는 일러스트와 같은 세부적인 그래픽요소‘ 정도로 인지하고 있었고, 와이어프레임은 웹이나 앱의 화면을 지칭하는 용어로 알고 있었습니다. 하지만 그 pm분은 gui를 ’당장 출시할 수 있을 정도로 완성된 화면‘을 만들어달라는 뜻으로 말씀하신 것이었습니다. 즉 제가 혼동되는 부분은 ’당장 출시할 수 있을 정도로 완성된 화면‘을 와이어프레임(굳이 따지자면 high-fi와이어프레임)이라고 불러야하는지, gui라고 불러야하는지 입니다. 실무에서는 해당 용어가 어떻게 사용되는지 궁금합니다!
안녕하세요~ 강의 잘 듣고 있습니다. 2024년이 되었네요. 새해 복 많이 받으세요 ^_^ 휴리스틱 평가를 이용한 디자인 원리가 잘 적용된 사례와 아닌 사례를 찾아보았습니다. 적용이 잘 된 웹사이트로는 Bloomingdale's 를 꼽았습니다. 휴리스틱 평가 부분 강의에서 말씀해주신 것 처럼 패스워드를 쳤을 때에 충족되는 부분이 초록색으로 불이 들어와서 사용자로서 비밀번호를 만들 때 어떤 것들을 더 충족시켜야 하는지, 지금까지 충족을 시켰는지 알 수있어서 편했습니다. 그리고 제가 원래 사용하던 이메일을 email 칸에 기입했더니 빨간색으로 원래 있는 아이디라는 안내까지 해주어서 좋았습니다. 적용이 잘 안된 웹사이트로는 Ikea 를 꼽았습니다. Ikea 웹사이트에서도 sign up page에서 비밀번호를 기입하는 부분에서 휴리스틱 평가가 적용될 것이라고 기대했는데 기존 사용하던 아이디를 넣어도 별다른 안내가 나오지 않았고, 비밀번호도 Bloomingdale's와 다르게 어떤 부분이 충족되었는지/더 충족해야하는지 빨간색 이어진 긴 문장으로는 쉽게 판단이 되지 않았습니다. 항상 강의 잘 보고있습니다. 감사합니다~
강사님 두번째 Apple 아이콘 자료 링크를 들어가 보면 The page you're looking for can't be found. 이렇게 나와요. 찾아봤는데 https://developer.apple.com/design/human-interface-guidelines/icons/ 여기가 맞나요?
안녕하세요. 저는 뉴욕에서 사는, 지금은 다른 전공으로 일하며 UX 디자인에 관심이 생겨서 공부하고 있는 사람입니다. 먼저 예시와 함께 쉽게 잘 설명해주셔서 초보자인 저도 잘 따라가고 있고 디자인 원리를 배우면서 기존에 웹/앱을 사용하면서 불편함을 느꼈던 것이 사용자로서 왜 불편함을 느꼈는지 다시한번 느끼게 되어서 신기하고 재밌습니다. 항상 감사합니다. 좋은 UX의 사례로 미국 사이트 Back Market 을 꼽았습니다. https://www.backmarket.com/en-us 디자인 레이아웃에 사용된 도형이 네모로 일관되게 통일되어 보기가 편했습니다. 대응의 원리를 잘 사용하여 왼쪽에 세 줄과 함께 "All Item", 그 바로 옆으로 지금 시즌에 사용자들이 가장 많이 찾는 "Holiday Gift Guide" 등등 사이트가 메뉴 바를 가장 왼쪽, search 기능을 맨 위에 두어서 사용자가 기존 다른 사이트에서 보던 레이아웃과 비슷하게 배치하여 이용하기가 편한 것 같이 느껴졌습니다. All Item tap을 누르면 카테고리 분류를 잘 해 놓아서 높은 사용자의 의도가 있는 사용자들은 이 탭을 이용하여 원하는 아이템을 바로 찾을 수 있습니다. 또한 메인 페이지에 Gift Idea, Community Stories 등 낮은 사용자의 의도를 가진 사용자들도 와서 원하는 바를 browse 할 수 있게 한 것 같습니다. 오른쪽 > 버튼을 검정색 바탕으로 해놓아서 사용자가 왼쪽 버튼보다 오른쪽 >을 눌러 오른쪽으로 이동하여 더 많은 아이템을 볼 수있도록 유도한 점이 좋았습니다. 안 좋은 UX 사례로는 Uniqlo를 꼽았습니다. https://www.uniqlo.com/us/en/men 웹사이트를 들어가면 가장 불편한 점이 크리스마스 세일 아이템만 강조하여서 다른 ALL 카테고리로 이동할 수 있는 버튼을 찾을 수가 없습니다. Holiday 프로모션 글자 color를 background 이미지와 중복된 컬러를 써서 버튼이 잘 안보이고 상단 우측에 로그인 아이콘이 없어서 찾는데 오래 걸렸습니다. 이미지의 해상도도 많이 좋지 않아서 보는데 많은 불편함이 있었습니다. 과제하면서 여러 사이트들을 찾아보고 좋은 UX와 안 좋은 UX를 가려보는 시간을 가졌는데 강의로 듣던 내용을 직접 찾아보며 어떤 점이 편하고 어쩐 점이 불편했는지 경험하니 더욱 강의 내용이 와닿고 기억에 오래 남는 것 같습니다. 감사합니다.
안녕하세요 선생님! 개인 포트폴리오 홈페이지 만들다 궁금한 점이 있어 여쭤봅니다 :) 해당 강의에서 만든 작업물을 변형하여 개인 포트폴리오 홈페이지에 넣으려고 하는데 Header랑 GNB 부분을 제이쿼리 load 메서드로 연결해서 그런지 a태그로 모바일 웹 작업물을 연결하면 Header랑 GNB 부분이 안 뜨더라구요ㅜㅜ 혹시 이런 경우에는 어떻게 하면 되는 걸까요? 항상 알차고 좋은 강의 감사합니다!
좋은 사례) Gmail PC 버전 카테고리별 전체 이메일 선택 기능: 왼쪽 상단 전체 이메일 체크 박스 옆에 작은 드롭다운 화살표를 배치함으로써 단순히 전체 이메일이 아닌 카테고리별 (read/unread/starred/unstarred) 전체 이메일을 선택 할 수 있다는 것을 사용자가 직관적으로 이해하게끔 되어있는데, 이는 행동 유도성의 원리에 부합하는 좋은 UX 사례라고 생각합니다. 안 좋은 사례) 카카오 웹툰 어플리케이션: 일반적인 웹툰 독자들은 요일별로 정리 및 나열된 페이지에 익숙한데, 어느 시점부터 카카오 웹툰 어플은 가장 첫 화면에 장르별 웹툰을 배치했고 하단 메뉴에서 '시간표'를 클릭해야 일반적으로 익숙한 요일별 웹툰을 볼 수 있습니다. 10년 이상된 웹툰 독자로서 저는 해당 UI가 아직도 익숙하지 않아 원하는 웹툰을 찾기 위해 헤매는 경우가 종종 있습니다. 이는 일관성의 원리의 기준에서 안 좋은 UX 사례라고 생각됩니다.
안녕하세요 강의를 수료하고 취업 준비중인 학생입니다! 피그마에서 포트폴리오 형식으로 파일을 만들었습니다. 사진 및 gif 파일이 같이 있습니다. 노트폴리오나 비헨스에 올려서 공유하려면 프레임을 PNG로 다운 받고 업로드시에 GIF 파일은 png로 인식되는 것 같습니다.. 피그마 프로토타입 재생 버튼을 누르고 그 URL을 쉐어해서 포트폴리오를 공유하나요? 사진 위에 GIF를 같이 배치하고 싶은데... 궁금합니다!
