에그드랍 모바일 페이지

https://eggdrop.co.kr/m

반응형x 이미지만 작아졌다 커졌다 함
폰트나 버튼 등은 반응하지 않음

피그마

페어와 함께 구현해보았다!! 뿌듯뿌듯
https://www.notion.so/codestates/91d9228f021246739c4d6847f773274a

구현할 때 내가 신경쓴 것

1. 홈페이지랑 똑같이 하려고 굉장히 신경썼다.
2. 사용된 애니메이션이 많음

• 메인페이지에 캐러셀이 두개
• 나는 첫번째 캐러셀을 했는데, 세개의 작은 원으로 된 버튼이 있고 그것을 누르면 해당 페이지로 이미지가 넘어간다. 그리고 가만 냅두면 자동으로 다음 이미지로 넘어간다. 여기까지는 했는데 드래그했을때 넘어가는 게 안돼서 고생함... 아무리 찾아봐도 둘다 같이 구현한 유튜브 강의는 없었다. 결국 포기함ㅠ
• 두번째 캐러셀의 버튼 만듦

3. GNB: 버거아이콘을 누르면 메뉴가 나온다. 그리고 계란이 오른쪽에서 튀어나옴
4. LNB: 횡스크롤이 됨! hover하면 빨갛게 되어야 하지만 두번째 캐러셀은 eggdrops choice만 구현했기 때문에 그냥 빨갛게 고정했다.
5. 신메뉴 부분에서 도장 돌아가는거!! 아무리 검색해도 안나왔는데 영어로 lotate 치니까 발견할 수 있었음... 너무 빨리 돌아가서 밀리세컨드를 늘렸더니 좀 버벅거리는 느낌이 든다.
   https://youtu.be/i9DGDgEVe20
6. Store 부분에 마우스 올라가면 bottom border가 쭉 나오는부분. 메뉴부분과 똑같은 방식으로 함
7. 메뉴에 들어가서 store 클릭하면 Store 페이지가 나오게 함.

개선한 점

1. 검색창을 만들었다.
2. 스토어 즐겨찾기 버튼을 만들었다.

User Flow

페어분과 signature brunch set를 주문하려는 고객이라는 명확한 주제를 두고 유저플로우 다이어그램을 만들어 보았다.
https://www.figma.com/file/1PaBWr1tS2U9jJZ8QAif8O/Untitled?node-id=0%3A1

피터모빌 7요소

유용성(Useful): 사용 가능한가?

사용 가능함.
그러나 타겟이 불명확함
가맹점주를 위한 홈페이지인지 고객을 위한 건지 모르겠음

사용성(Usable): 사용하기 쉬운가?

사용성이 떨어진다. 주문하기 어려움.
메뉴를 기껏 찾아서 들어가도 배민이나 네이버에 연결이 되는데 메뉴 다시 찾아야함

매력성(Desirable): 매력적인가?

홈페이지가 예쁨.. 매력적이야
컬러감도 귀엽고 효과를 많이 사용해서 구경이 재미있는 홈페이지임

신뢰성(Credible): 신뢰할 수 있는가?

잘 모르겠다 타겟이 불명확해서 그런 듯
영양성분도 명확하지 않음. 샌드위치만 신경써서 영양정보를 명시함
사이드메뉴나 음료 같은 경우는 정보 일체 없음

접근성(Accessible): 접근하기 쉬운가?

아님.
반응형 웹이 아니라서 경우에 따라서는 레이아웃이 망가질 수도 있고 부모님같은 경우 글씨도 못읽을 것 같다.
마우스가 안돼서 탭을 써야할 경우 메뉴에서 서브메뉴로 탭이 넘어가느라 화면에 안보이는데, 서브메뉴를 명시적으로 보이게 해야 할듯
이미지 태그에 alt가 비어있다.

검색가능성(Findable): 찾기 쉬운가?

메뉴를 찾으려면 계속 클릭클릭해서 들어가야 함.
메뉴 찾는 서치바가 있으면 좋을 것 같다.

가치성(Valuable): 가치를 제공하는가?

굳이 방문하지 않을 사이트.
주문하려면 어차피 다른 어플로 들어가야함
전시용 홈페이지인듯

UI 신경써야 하는 이유

https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950