GUI 디자인의 원리

그래픽 사용자 인터페이스 디자인을 위해 일반적으로 허용되는 원칙은 다음과 같다.

1. 심미적으로 즐거운 표현(Aesthetically pleasing) – 다음과 같은 프리젠테이션 및 그래픽 디자인 원칙에 따라 시각적 호소력을 제공한다.

  • 화면 요소 간에 의미 있는 대비를 제공한다.
  • 그룹화를 만든다.
  • 화면 요소와 그룹을 정렬 한다.
  • 3차원 표현 제공
  • 효과적으로 색상과 그래픽을 사용한다.

2. 명확성(Clarity) – 인터페이스는 시각적, 개념적, 언어적으로 명확해야 한다.

  • 시각적 요소
  • 기능들
  • 은유
  • 단어와 텍스트

3. 호환성(Compatibility) – 다음과 같이 호환성을 제공해야 한다.

  • 사용자
  • 과제와 직업
  • 제품
  • 사용자의 관점을 채택

4. 이해도(Comprehensibility) – 시스템을 쉽게 이해하고 습득해야 한다. 사용자는 다음을 알아야 한다.

  • 무엇을 해야 할까요?
  • 무엇을 보아야 하는가?
  • 언제 할 것인가?
  • 어디에서 할 것인가?
  • 그것을 하는 이유
  • 그것을 하는 방법
  • 행동, 반응, 시각 준비 및 정보의 흐름은 이해하기 쉽고 문맥에 배치할 수 있는 현명한 순서여야 한다.

5. 구성(Configurability) – 설정의 개인화, 구성 및 재구성을 쉽게 허용한다.

  • 제어 감각을 높인다.
  • 이해의 적극적인 역할을 장려한다.

6. 일관성(Consistency) – 시스템은 같은 처리량을 보고, 작동하고, 적용해야 한다. 비슷한 구성 요소가 있어야 한다.

  • 비슷한 모양
  • 비슷한 용도
  • 비슷하게 작동
  • 동일한 조치는 항상 동일한 결과를 산출해야 한다.
  • 요소의 기능이 변경되어서는 안 된다.
  • 표준 요소의 위치는 변경되어서는 안 된다.

7. 제어(Control) – 사용자는 상호 작용을 제어해야 한다.

  • 명시적 사용자 요청으로 인해 작업이 수행되어야 한다.
  • 작업을 신속하게 수행해야 한다.
  • 작업은 중단 또는 종료할 수 있어야 한다.
  • 사용자는 오류가 발생하면 절대로 중단해서는 안 된다.
  • 유지되는 컨텍스트는 사용자의 관점이어야 한다.
  • 목표를 달성하기 위한 수단은 사용자의 기술, 경험, 습관 및 선호도와 융통성 있고 호환 가능해야 한다.
  • 사용자가 사용할 수 있는 작업을 제한하기 때문에 상태를 피하야 한다.
  • 항상 적절한 기본값 집합을 제공하면서 사용자가 인터페이스 측면을 사용자 정의 할 수 있도록 허용한다.

8. 직접성(Directness) – 직무 수행을 위한 직접적인 방법을 제공한다.

  • 사용할 수 있는 대안이 표시되어야 하며,
  • 객체에 대한 동작의 효과가 표시되어야 한다.

9. 효율성(Efficiency)

  • 눈과 손의 움직임과 기타 제어 동작을 최소화 한다.
  • 다양한 시스템 제어 간의 전환은 쉽고 자유롭게 이루어져야 한다.
  • 탐색 경로는 가능한 한 짧아야 합니다.
  • 화면을 통한 눈의 움직임은 분명하고 순차적이어야 한다.
  • 가능할 때마다 사용자의 요구와 필요를 예측한다.

10. 친숙함(Familiarity) – 익숙한 개념을 사용하고 사용자에게 익숙한 언어를 사용한다.

  • 인터페이스를 자연스럽게 유지하여 사용자의 행동 패턴을 모방한다.
  • 현실 세계의 은유를 사용한다.

11. 유연성(Flexibility) – 시스템은 사용자의 다양한 요구에 따라 유연해야 하며 다음을 기반으로 한 수준 및 유형의 성과를 낼 수 있어야 한다.

  • 각 사용자의 지식과 기술.
  • 각 사용자의 경험.
  • 각 사용자의 개인 취향
  • 각 사용자의 습관
  • 그 순간의 조건

12. 용서(Forgiveness)

  • 공통적이고 피할 수 없는 인간의 실수를 이해해야 한다.
  • 가능할 때마다 오류가 발생하지 않도록 한다.
  • 가능한 치명적인 오류로부터 보호해야 한다.
  • 오류가 발생하면 건설적인 메시지를 제공한다.

13. 예측(Predictability) – 사용자는 작업의 자연스러운 진행을 예상할 수 있어야 한다.

  • 뚜렷하고 인식 가능한 화면 요소 제공
  • 수행할 행동 결과에 단서를 제공한다.
  • 모든 기대는 완전히 균등하게 이루어져야 한다.

14. 복구(Recovery) – 시스템에서 허용해야 하는 항목은 다음과 같다.

  • 폐지되거나 취소될 명령 또는 작업.
  • 어려움이 발생하면 즉시 특정 시점으로 복귀한다.

의 결과로 사용자가 결코 업무를 잃지 않도록 한다.

  • 그들의 부분에 대한 오류
  • H/W, S/W 또는 통신 문제.

15. 대응성(Responsiveness) – 시스템은 사용자의 요청에 신속하게 응답해야 한다.

  • 모든 사용자 작업에 대한 즉각적인 승인 제공
  • 비쥬얼
  • 텍스트
  • 귀의

16. 단순성(Simplicity)

  • 가능한 한 간단한 인터페이스 제공
  • 기본값 제공
  • 화면 정렬 지점을 최소화한다.
  • 드문 행동을 희생시키면서 일반적인 행동을 간단하게 만든다.
  • 일관성과 일관성 제공

단순성을 제공하는 5가지 방법 :

  • 먼저 공통적이고 필요한 기능을 제시한다.
  • 눈에 띄게 중요한 기능,
  • 더 정교하고 자주 사용하지 않는 기능 숨기기

17. 투명성(Transparency)

  • 인터페이스의 메커니즘에 상관없이 사용자가 작업이나 작업에 집중할 수 있게 해야 한다.
  • 컴퓨터 내부의 작동 및 작동 알림은 사용자에게 보이지 않아야 한다.

18. 타협(Trade-offs)

  • 최종 디자인은 종종 상충하는 설계 원리를 균형을 이루는 일련의 절충안을 기반으로 한다.
  • 사람의 요구 사항은 항상 기술적 요구 사항보다 우선한다.

슬라이드 자료

23 Comments

  1. 일관성 대하여
    – 쇼핑몰 앱을 예를 들면 신상품 구매를 광고하는 화면이 메인 화면으로 광고성으로 올라와서 정상적인 구매 절차를 진행하는 대해 화면을 제거 하는 번거로움이 있었습니다 이런 경우 일괄적으로 신상품 코너를 만들어서 사용자가 필요 시 볼 수 있도록 유도를 해주고 광고용 파업창은 가능한 작게 만들거나 잠깐 보였다 사라지는 패턴으로 만들었으면 좋지않을까 생각이 들때가 있었습니다

    • 시각적 계층구조
      – 복잡성을 시각화 하고 이해하는데 필요한 단순한 구조 역할을 합니다 따라서 사용자가 직관적으로 이해할수 있도록 다단계 형태별로 정보를 제공하는 것을 목적으로 하고 있으므로 기본적으로 시각적으로 표현하는 트리 네스트 계단 등 세가지 형태로 분류를 하고 있습니다 강원대 홈페이지는 이러한 요소를 갖추고있는 웹페이지라고 생각되어집니다

      • 개성
        – 최근에 등장한 수많은 결제 서비스 중에는 단순 소액결제 부터 휴대폰 간편 서비스 까지 많은 앱들이 나오고 있지만 기존의 결제 시스템이라는 틀을 크게 깨지 않으면서도 프로세스에 변화와 혁신을 반영한 결제 시스템을 디자인해서 사용자로 하여금 결제의 복잡함을 단순화 하여 직관적으로 간편하면서도 보안성이 높은 결제 서비스를 심플하게 디자인하고자 합니다

  2. 일관성

    불편한점은 아무래도 앱보다는 웹페이지가 더 많은 것 같습니다. 많은 것을 홍보해야하는 마켓위주의 웹페이지들은 들어감과 동시에 이리저리 다양한 포멧에 광고창이 줄줄이 뜨면서 소비자에겐 불쾌감과 동시에 구매욕을 저하 시는 것 같습니다.

    시각적 계층구조

    학교 홈페이지는 처음부터 생각했지만 상당히 불편한 부분이 많았습니다. 학교라는 전제하에 있는 홈페이지다보니 많은 정보들이 올라오는데 제가 느낀 바로는 원하는 정보들을 쉽게 찾을 수 있는 홈페이지는 아닌 것 같습니다. 또한 자주 튕기고 하는 부분도 많이 개선되야 된다고 생각 합니다.

    개성

    사진을 매우 좋아하는 저는 디자인 적인 화려함 보다는 본실에 충실하고 간편 하면서 시각적으로 집중할 수 있는 화면 구성을 만들어야 한다고 생각합니다. 사진 수정및 보정 (색감) 을 하는 어플인 만큼 주변이 깔끔하며 색을 죽이고 많이 튀지않게 채도가없는 색상들을 고려하여 제가 편집하고자 하는 사진에만 집중할 수 있게 만들고 싶습니다.

    • 사용자를 고려하지 않은 콘텐츠는 시간이 지속할 수록 문제점을 크게 발생시키지~
      자네의 생각을 꼭 잊지 않기를 바라네~!

  3. (늦게나마 올립니다. 죄송합니다ㅠㅠ)

    일관성

    제가 사용해본 앱들을 기준으로 봤을때 레이아웃,컬러등 시각적인 부분에서의 일관성에 대한 불편함을 느낀적은 없었지만, 게임앱 또는 쇼핑앱에서의 불필요한 광고들은 게임을 해야 사라진다는 식이라던가 일정한 시간이 지나야 광고팝업창을 끌 수 있는 점 등이 늘 눈살을 찌푸리게 했었고 많은 불편함을 느꼈었습니다.

    시각적 계층구조

    학교 홈페이지는 많은 양의 컨텐츠들을 구조화 하여 보여주기엔 실패한 사례라고 생각합니다.
    먼저 앞서 나온 일관성의 부분에서 깨졌다고 생각하는데요. 자신에게 익숙한 웹사이트에서의 일관성은 일관적인 레이아웃이 가장 중요하다고 생각되는데, 그 이유는 이번에 제가 급하게 찾을 것이 있어서 학교 홈페이지에 들어갔었는데 익숙했던 홈페이지가 레이아웃이 많이 바뀌어서 찾는데에 시간을 소비했던적이 있었습니다.
    그만큼 일관성이 중요하다고 생각하는데 이번에 바뀐 홈페이지는 단순한 형태의 레이아웃 구성을 생각하고 만든 것 같지만 첫 메인 화면에서 스크롤해서 내려가면 다 각자 따로노는 느낌이고 산만하다고 느껴졌습니다.
    컬러 부분에서도 같은 톤느낌을 주려고 한 것 같았지만 이 부분에서도 너무 많은 색을 사용하지 않았나 생각합니다.

    개성

    (미세먼지앱 기준)
    미세먼지를 생각하면 칙칙하고 흐린.. 그다지 밝은 분위기를 떠올릴 수 없는 단어입니다.
    하지만 일단 앱은 사용자의 감성을 이끌어내 앱을 구매 혹은 깔도록 하는것이고, 그 다음 앱의 구성을 통해 꾸준히 사용하게끔 만드는 것입니다.
    저는 여기서 감성디자인을 떠올렸습니다.
    트렌드이기도 하고 제가 정말 좋아하는 디자인이기때문입니다.
    감성디자인에 일러스트적인면을 적용해 색감을 잘 활용한 일러스트 아이콘 등으로 편안함을 주어 계속해서 손이 가는 앱을 디자인 하고싶습니다.

  4. 일관성

    앱을 사용하다 보면 앱 개발자가 이익을 위하여 일부러 전의 버튼과 일관성이 없게 디자인하여 자신이 원하는 방향으로 유도하는 경우가 있습니다. 예를들면 광고,알람 수신 동의를 물을 때 전과 다르게 ‘네’ 와 ‘아니요’ 버튼을 반대로 위치시키는 경우가 있습니다. 물론 개발자가 앱을 더 알리고 구매를 하게끔 일부러 설계한 것이지만 사용자의 입장으로서는 가끔 짜증이납니다. 알림을 끄기 위한 설정은 또 꼭꼭 숨겨져 있어 번거롭기 때문입니다.

    시각적 계층구조

    제가 알기로는 이전에는 춘천캠퍼스와 삼척,도계캠퍼스 홈페이지가 나눠져있었던거 같은데 리뉴얼이 되면서 두 학교의 홈페이지가 하나로 합쳐진 것 같습니다. 저는 리뉴얼 된 이후 사용하기 더 불편하다고 느꼈습니다. 학교홈페이지를 가장 많이 사용하고 필요로 하는 것은 학생일텐데 학생들에게 중요한 공지사항이 밑 쪽에 위치하고 있습니다. 학교 연혁, 학교 소식 같은 상대적으로 덜 중요한 정보들이 맨 처음 화면에 자리잡고 있는 것은 상당히 비효율적이라고 생각합니다. 또한 학생 정보, 등록금 정보 등을 보기위해 꼭 필요한 사용자 메뉴가 눈에 띄지 않습니다. 오히려 이 전이 사용자 메뉴가 맨 왼쪽에 크게 자리잡고 있어 더욱 편리했던 것 같습니다. 개인적으로 이번 리뉴얼은 학생들을 고려하지 못한 선택들이 많은 것 같습니다.

    개성

    요즘 어플들을 보면 업데이트가 될 수록 심플하고 단순해 지는 것 같습니다. 특히 카카오톡을 사용하면서 카카오톡 초반과 많이 달라졌다는 생각이 드는데요. 점점 예뻐지기는 하지만 카카오톡 초기의 고유의 색은 많이 사라진 것 같습니다. 제가 무엇인가를 디자인한다면 그것만의 고유한 색, 감성 등의 개성이 두드러지고 그 개성을 유지하면서 트렌드에 맞게 발전시키고 싶습니다. 그리고 디자인들이 심플해 질수록 고령자들이 사용하기에 어려워지는 것 같다는 생각이 듭니다. 고령화를 넘어 고령사회에 진입한 우리나라로써 고령사용자들도 쉽게 사용할 수 있는 직관적이고 뚜렷한 디자인을 하고싶습니다.

  5. 일관성/Consistency

    삼성과 엘지의 스마트폰을 각각 사용하다 보면 스마트폰 중 어떠한 것은 확인과 취소의 위치가 반대로 노출되는 경우가 있습니다. 오른손 잡이를 위한 UI가 디폴트인 스마트폰은 확인 버튼이 접근성이 편리한 오른쪽에, 취소 버튼은 그 반대쪽에 위치해있는 경우가 잦은데, 그렇지 않은 경우에는 손가락을 많이 벌려야 하거나 혹은 습관적으로 반대 버튼을 누르곤 합니다. 이러한 점들이 UI에서 일관성을 유지하지 않아 일어나는 불편함이라고 생각합니다.

    시각적 계층구조/Hierarchy

    강원대학교 홈페이지 메인 화면을 내려가다 보면, KNU소식란이 있습니다. 이곳의 뉴스란이 가장 화면 배분이 크고, 그다음으로 KNU People, 대학발전기금, 홍보영상·e-book·언론 속 KNU 아이콘 순서로 배치되어 있습니다. 이것으로 보아 뉴스란의 두 칸이 가장 시선이 먼저 꽂히는 주 컨텐츠이고, 크기 순서대로 다음, 그다음 컨텐츠라는 것을 알 수 있습니다. 이외에 KNU 알림도 비슷한 맥락입니다. 하지만 기본적으로 홈페이지 내에 너무 많은 요소들이 들어가 있고 찾고자 하는 내용은 숨어있어서 한 번에 찾기 쉽지 않습니다. 아마 사람들은 홈페이지 내에서 무언가를 찾으려 하기보다는 학교로 직접 전화해 물어보는 일이 더 많을 것이고, 그렇다면 이 UI의 디자인 목적은 도대체 무엇인지 알 수 없는 것 같습니다.

    개성/Personality

    요즘의 디자인은 너무 트렌드에 구속되는 것 같습니다. 디자이너는 시대의 흐름을 읽고 대중이 원하면서 세련된 디자인을 하는 것이 중요하다지만, 너무 유행에만 편중되어 마치 공장에서 찍어낸 듯 비슷한 형태의 디자인들이 시장에 판을 치고, 개개인의 독창성과 개성을 잃어가는 것이 안타깝습니다. 저는 유행에 편승하면서도 저 자신의 개성을 잃지 않은, 그런 디자인을 하고 싶습니다.

  6. 일관성

    앱을 사용하는 도중 광고창이 많이 뜹니다. 닫기 버튼을 눌러도 시간이 어느 정도 지나 광고가 다시 뜨면 매우 불편하다는 생각을 하게 됩니다. 상업적으로는 필요할 수도 있겠지만 앱 사용자의 입장에서는 불필요한 광고라는 생각이 들었습니다.

    시각적 계층구조

    홈페이지는 많은 양의 콘텐츠를 구조화하여야 합니다. 그래서 홈페이지의 매뉴얼들은 좀 더 쉽고 단순하게 계층적으로 되어야 합니다, 그래야 원하는 정보를 보다 빠르게 검색할 수 있기 때문입니다. 예전의 홈페이지보다는 세련됐지만 스크롤을 많이 내려야 하는 것이 단점이라면 단점이라 할 수 있을 것 같습니다. 화면을 보고 한 번에 아 여기 있구나 하고 클릭을 해야 하는데 스크롤을 2~3번 정도 내려야 학교의 소식, 알림, 캠퍼스 소개를 볼 수 있습니다. 조금만 더 한눈에 볼 수 있게 개선되면 좋을 것 같습니다.

    개성

    지금 이 시대에 트렌드는 개성이라고 생각합니다. 티비를 틀거나 집 밖을 나가거나 하면 자기만의 개성으로 꾸민 사람들이 참 많이 있습니다. 제가 생각하는 저의 개성은 감성인 것 같습니다. 감성을 표출하여 함께 공유할 수 있는 앱을 만들어 보고 싶습니다.

  7. 일관성

    전체적인 레이아웃, 컬러등에서는 별로 불편한 점은 없었습니다. 하지만 광고가 나올 때, 취소버튼을 매번 위치를 다르게 설정해 놓아서 앱을 이용할 때 불편함을 느꼈었습니다. 그래서 때마다 버튼을 찾거나, 실수로 다른 곳을 눌러서 원하지 않는 페이지에 들어가곤 했습니다. 이런 점은 개선되어야 한다고 생각합니다.

    시각적 계층구조

    이번에 학교홈페이지가 바뀌면서 전과 많이 달라져서 원하는 정보를 찾기 힘들었습니다. 또한 레이아웃이 전보다는 깔끔해 보이지만, 정보와 소속 사이트들의 링크가 여기저기 섞여있어 효율적이지 못하다고 생각합니다.

    개성

    요즘 앱들을 보면 개성이 없이 대부분 비슷하게 디자인을 해놓은 경우가 많습니다. 트렌드를 따라가고 단순해지는 것은 좋지만, 그 앱만의 개성이 있어야 된다고 생각합니다. 제가 디자인을 하게 된다면 앱의 특성을 살려 그에 어울리는 컬러와 레이아웃을 만들어 단순하면서도 개성이 있는 앱을 만들고 싶습니다.

  8. 일관성/Consistency
    제가 휴대폰을 사용할 때 가장 많이 이용하는 서비스들은 메신저와 영상 시청입니다. 메신저 어플 들은 거의 모든 사람들이 이용하기 때문에 업데이트를 해도 어렵지 않게 업데이트가 되고 자주사용하기 때문에 쉽게 바로 적응할 수 있는 것 같습니다. 근데 문제는 영상시청만 주가 되는 어플이 아닌 sns의 영상시청에 적잖이 불편함을 느끼고 있습니다. 요즘 인스타그램이나 페이스북을 통해 모든 사람들이 많은 영상을 접하고 있고, 저 또한 마찬가지입니다. sns어플에서 영상을 볼 때 제일 불편한 것은 한번 재생한 영상 중간에 화면을 움직였다가 다시 영상을 시청하게 되면 다시 맨 처음으로 돌아가게 됩니다. 그렇게 되면 다시 앞부분부터 봐야하는 귀찮고 번거로움이 있습니다 모든 동영상은 영상 재생버튼이 있어서 자신이 보고싶은 부분을 드래그 하거나 터치하면 원하는 시간부터 영상을 볼 수 있지만 sns의 영상체계는 그렇지 않은 부분이 더 많은 것 같습니다. 물론 재생버튼이 존재하는 sns들이 있기는 합니다만 버튼이 너무 작고 너무 화면 하단에 붙어있어 누르게 되면 다른 영상이 눌린다 거나 인터페이스의 한계를 느끼게 되는 것 같습니다. 그래서 영상을 볼 때 거슬리지 않는 선에서 재생버튼이나 하단바를 효율적으로 배치할 수 있는 방법을 모색하는 것이 좋을 것 같습니다.

    시각적 계층구조/Hierarchy
    강원대학교 홈페이지는 제가 자주 이용하는 홈페이지 중 하나 인 것 같습니다. 강원대학교 홈페이지에서 시각적 계층구조를 만들기 위해 사용한 방법은 여느 사이트들과 같이 가장 크게 대분류 즉 제목으로 여러 갈래가 나뉘어지고 그 위에 마우스 커서를 갖다 대면 대분류안에 내용들인 소분류로 나뉘어 지는 방법을 사용했습니다. 제가 16년도에 처음 강원대학교 홈페이지를 들어와봤는데 현재19년도와 비교하면 굉장히 발전했다고 생각합니다. 디자인면에서도 많은 업데이트를 한 것 같고 귀여운 아이콘들과 애니메이션의 활용이 많이 늘어난 것 같습니다. 하지만 불편한 점은 16년도에도 현재 19년도에도, 메뉴의 분류의 설명이 약한 것 같습니다. 이 말은 즉 내가 찾으려고 하는 정보들이 어디 있는지 찾기 힘들다는 것입니다. 그래서 원하는 정보를 찾으려면 마우스를 좀 더 많이 클릭해야 합니다. 좀더 간결한 분류와 정확한 명칭들이 필요할 것 같고, 너무 한페이지에 많은 정보들을 넣으려고 해서 한눈에 안 들어오는 단점도 있는 것 같습니다. 이 점만 개선한다면 좀 더 효율적으로 이용할 수 있을 것 같은 생각이 듭니다.

    개성/Personality
    시대가 변화함으로써 좀더 디지털적이고 미래 지향적인 디자인이 많이 나오고 있습니다. 주변을 보면 디지털적인게 아닌 디자인이 없다 해도 과언이 아닙니다. 그럴수록 사람들은 시대를 거꾸로 돌아가려는 성향이 있는 것 같습니다. 예를 들어 복고패션이 다시 유행을 하고 있는 것처럼 아날로그 적인 디자인도 많이 찾고 있다고 생각합니다. 제가 하고 싶은 디자인은 아날로그적이지만 기술면으로는 밀리지 않고, 사용자들이 더더욱 편하게 쓸 수 있는 디지털적인 디자인입니다. 정리하자면 디지털적인 면과 아날로그적인 면이 공존하게 하여 어떤 사용자에게는 향수를 일으킬 수도 있고, 어떤 사용자에게는 호기심을 부를 수 있는 디자인을 하고싶습니다.

  9. 일관성

    홈페이지나 앱을 사용할 때 광고가 많이 뜨는 경우가 있는데, 그럴때 광고창을 닫으려고 해도 닫기버튼을 일부러 아주 작게 만들어놔서 잘못 인식되어서 광고페이지를 들어가는 경우가 많았습니다. 이럴때가 가장 불편했습니다.

    시각적계층구조

    강원대학교 홈페이지에 경우에 가장 불편한 점은 자신이 원하는 정보를 쉽게 찾을 수 없는게 가장 큰 불편한점입니다. 정보를 잘 알아볼수 있게 개선하면 좋을것 같습니다.

    개성

    요즘은 화려한 앱보다는 기능에 충실한 깔끔한 디자인을 가진 앱이 많다고 생각합니다. 제가 디자인을 한다면 앱의 기능을 편리하게 사용할 수 있으며 깔끔한 디자인을 하고싶습니다.

  10. 일관성
    일관성은 사용자들에게 편안함을 준다. 사용자들이 여러분의 앱을 사용하기 위해 새로운 사용법을 익힐 필요가 없기 때문이다. 일관성 있는 UI는 상호작용을 더 용이하게 해준다. 통일성 있는 시각 요소를 사용하여 콘텐츠를 쉽게 찾을 수 있는 위치에 두고 중요한 요소들을 눈에 띄게 만들 수 있다. 사용자들은 마치 오래 다루던 물건을 다루듯이 쉽고 간편하게 콘텐츠를 활용할 수 있게 되어 분 좋은 사용자 경험은 긍정적인 정서 반응을 이끌어 낸다.

    시각적 계층구조
    시각적 계층 구조는 디자인 요소를 중요한 순서대로 구성하는 방법이다. 다른 말로하면, 우리가 보는 것을 알아차리는 순서에 영향을 주는 것은 일련의 원칙들이다. 이 황금률은 우리가 예술적으로 즐겁고 올바른 관심을 끄는 디자인을 구성하는 데 도움이 된다. 각 면의 내용 중에 유용한 정보를 제공하기 위해 주요 내용을 가장 넓은 지면을 배치해 부각시키고 유사한 내용은 서로 묶거나 하위 항목에 포함시켜 좀 더 효율적으로 정보를 제공할 수 있다.

    개성
    위에 말한 일관성과 시각적 계층구도는 우리의 디자인을 이용하는 소비자들에게 편한하고 편리한 서비스를 제공하기 위해 지키는 필수 가이드 이다. 이러한 필수 가이드 라인을 지키고 난 후 우리는 여기서 개성을 넣어 소비자들에게 좀 더감성적이고 고급진 느낌을 부여한다면 우리의 디자인은 소비자들이 만족하는 디자인이 제공할 수 있다.

  11. 일관성
    메뉴, 웹디자인이 깔끔하게 정리되어 편하게 즐겨 찾던 쇼핑몰 앱이 있었는데, 업데이트 이후 웹 속도도 느려지고 메뉴 레이아웃이나 전체적인 웹디자인의 스타일이 갑작스럽게 크게 바뀌어서 당황스러웠고, 적응하는데 힘들었던 경험이 있습니다. 지나친 일관성은 지루함을 줄 수 있지만 아이덴티티와 편리성을 깨지 않는 적당한 선에서 변화를 시도해야 한다고 느꼈습니다.

    시각적 계층구도
    저희 학교의 홈페이지의 시각적 계층구도에서 보았을 때 나쁘지 않다고 생각합니다. 전체적인 디자인이나 콘셉트도 잘 유지되어 있고, 메뉴나 부수적인 요소들, 보여주고자 하는 콘텐츠들도 잘 함축되어 있다고 봅니다. 불편함을 느끼는 부분은 움직이는 팝업 요소가 많아서 원하는 정보를 찾으려고 할 때 시선이 분산되어 혼란스러움을 느꼈습니다. 이러한 움직이는 요소를 줄이고 학생들이 주로 찾는 포탈이나 장학금, 학과별 학교 일정에 대해 심플하게 잘 배치되었으면 더 좋지 않았을까 생각했습니다.

    개성
    대체적으로 심플함과 실용성 위주의 디자인을 추구하고 많이 사용합니다. 남들과 달라 보이기 위한 디자인, 소비자들의 기호에 따라, 트렌드에 따라서 디자인을 하다 보면 본인의 개성을 잃는다고 대체로 생각하기 쉬운데, 틀린 말은 아니지만 이런 남들과 달라 보이는 디자인도 해보고, 유행에 맞는 디자인도 해보고, 소비자들의 기호에 맞는 디자인, 여러 디자인을 접해보면서 자신만의 개성을 찾아낼 수 있다고 생각합니다. 갑자기 자신이 보여주고자 하는 개성 있는 디자인은 하루아침에 만들어지는 것이 아닙니다. 디자인은 예술과는 또 다른 면을 가지고 있기에, 여러 디자인을 경험하면서 자신의 개성을 보여줄 수 있는 선을 만들고 그 선에서의 개성을 찾는 게 먼저라고 생각했습니다.

  12. 일관성/Consistency
    앱을 사용함에 있어서 UI의 일관성이 지켜지지않아 불편한점은 없었던거 같습니다.

    시각적 계층구조/Hierarchy
    강원대 홈페이지는 학생들이 많이 이용하는 WEB으로 학생이 많이 찾을만한 학사일정, 공지사항등을 위로 배치했으면 좋겠습니다.

    개성/Personality
    깔끔하고 심플하지만 사람들의 시선을 끄는 디자인을 하고 싶습니다.

  13. 일관성/Consistency

    UI가 일관성을 통일하지 않아서 생기는 불편함은 참 다양한거 같습니다. 스마트폰을 사용하다보면 승인하는 버튼과 최소하는 버튼의 크기가 작아 많은 어려움을 격었습니다. 또한 오른손잡이를 위해 승인버튼을 오른쪽에 배치하고, 왼쪽에 취소버튼을 배치하는 경우의 수가 많습니다. 하지만 그렇지 못하는 경우에는 손가락의 길이가 닿지 않아서 핸드폰을 떨어트리는 불편함을 격었던 경험이 있습니다.

    시각적 계층구조/ Hierarchy

    학교 홈페이지는 학교를 대표해서 학생들에게 정확한 정보를 전달해주는 매개체로 가장 중요한 부분중 하나라고 생각합니다. 저희 학교 홈페이지는 시각적 계층구조가 잘 되어져 있다고 생각합니다. 큰 타이틀이 심볼화되어 자리잡혀있고, 그 안에는 타이틀에 연관되어진 작은 카테고리들이 구성되어져 있습니다. 이러한 시각적 계층구조가 잘 되어져 있다고 생각합니다. 다만 불편한 점은 정보의 링크들이 계층적이지 않고 흩어져있어서 혼란스러운 점이 있습니다. 이러한 점은 개선되어야 합니다.

    개성/ Personality

    요즘은 각자의 개성없이 무작정 트렌드만을 따라한 앱들이 많이 나타나고 있습니다. 디자인이란 각자의 컬러와 레이아웃을 만들어 자기만의 개성을 중심으로 사용자에게 편리한 디자인을 하는 것이 가장 중요하다고 생각합니다. 사용자의 편리함과 나만의 개성을 표현한 앱을 만들어보고 싶습니다.

  14. 일관성
    평소 휴대폰 앱을 사용하면서 Ui와 Gui가 사용자의 이용을 편리하게 만드는 것임에도 오히려 종종 불편한 경우가 생긴적이 있습니다.예를 들면 간단화 시킨 아이콘의 전달력이 떨어져
    잘못 클릭하는 경우입니다. 또한 앱의 매페이지마다
    같은 효과이지만 다른 아이콘으로 표현한다던가 아이콘의 일관성이 없을 때 불편함을 느낀것같습니다.

    시각적 계층구조
    강원대학교 홈페이지에서 가장 좋다고 느낀 시각적 계층구조는
    팝업창입니다. 보통 다른 웹페이지 같은 경우 팝업창을 의도적으로 가장 가운데에 띄워
    사용자가 팝업창을 제거하는 번거로움을 느끼는데 강원대홈페이지의 같은 경우 맨위쪽에 띄워 따로 팝업창을 제거하지않더라도 화면의 내용을 한번에 볼 수 있습니다.
    또한 사용자메뉴역시 간단한 아이콘으로 한눈에 전달받을 수 있어 효율적이고 시각적 계층 구조의 좋은예시라고 생각합니다.

    개성
    스마트폰 사용자가 늘어나면서 앱의 사용자도 늘어나고 직접 앱을 제작하는 사람들도 늘고있습니다. 장점은 다양한 종류의 앱이 생겨나면서 이용자의 선택권과 편리함이 높아집니다. 하지만 단점은 그만큼 많은 앱이 개발되면서 무의미하고 실용성없는 앱도 늘어납니다.
    저는 사용자의 편리함에 최대한 맞춰 사용자가 만족감높은 앱을 만드는 것이 가장 중요하다고 생각합니다. 또한 그다음으로 중요하다고생각하는 한눈에 보이는 시각적 계층구조를 잘이용해보고싶습니다.

  15. 일관성 / Consistency
    안드로이드폰의 경우 기본적으로 오픈소스를 지향하고 UI 커스텀에 제한을 두질 않다 보니 UI가 회사별로 파편화가 심한 편인데 이로 인하여 삼성폰을 쓰다가 LG폰을 쓰게 되면 당장 하단 내비게이션 바의 버튼 순서가 반대로 배치된 부분에서부터 문제점이 생겼고, 현재는 디자인 가이드라인을 지키라는 구글의 권고가 내려졌지만 그런데도 이미 파편화된 커스텀 UI로 인해 매번 다른 기종의 폰을 사용할 때마다 불편함을 겪었습니다.

    시각적 계층구조 / Hierarchy
    강원대학교 홈페이지의 같은 경우 시각적 계층구조를 단순화 시키기 위해 크게 본 홈페이지, K-Cloud, e-루리, KORUS, 웹메일로 나누어져 있지만 정작 내면을 들여다보면 엉망이었다고 생각합니다. 예를 들어 K-Cloud에서는 로그인하면 보이는 메인화면이 너무 난잡하여 내가 찾고 싶은 정보만을 쉽게 찾지 못하는 부분이 있었다고 봅니다. 이를 좀 더 심플하고 간략하게 만들어 정보를 쉽게 찾게 개선되면 좋겠다고 생각됩니다.

    개성 / Personality
    얼마 전에 교수님께 통해서 평가받았던 앱을 통해 디자인에 치우쳐 져 여러 가지 기능을 추가하여 본래의 주제를 잊은 앱을 디자인하는 것보단 좀 더 한가지의 주제를 중심으로 한 즉, 기능에 충실한 심플한 디자인의 앱을 디자인하고 싶다고 느꼈습니다.

  16. 일관성
    강원대학교 앱을 예로 들면 메인화면에는 학생들이 자주 사용하는 화면(출석 인증, 시간표, 학사일정 등)이 나오거나 직접 설정하여 볼 수 있게 해야 하지만 정작 앱에 메인화면은 지도, 학교소개, 입학 안내 등 불필요한 정보를 먼저 보여주고 정작 필요한 출석 인증, 시간표, 학사일정 등은 어렵고 불편하게 찾아야 하며 대부분 정보와 기능은 사용할 수 없는 유명무실일 뿐이라 사용하기 매우 불편합니다. GUI와 배열레이아웃 또한 사용자가 보고, 사용하기 어렵고 불친절한 디자인으로 짜증과 불편함에 앱을 삭제하기도 했습니다.

    시각적 계층 구조
    이루리, 도서관 등의 중요 교내 사이트 가기가 맨 오른쪽 아래에는 교내사이트 바로 가기가 있습니다. 교내사이트 바로 가기는 매번 스크롤을 내리고 구석에 있어 찾기 어려워 사용자가 이용하기 불편하다고 생각을 합니다. 로그인, 언어를 설정할 수 있는 맨 위 메뉴 창에 위치한다면 사용자가 사용하기 쉽고 편할 것 같습니다.
    통합 전 춘천, 삼척·도계로 나뉘었을 때는 재학생, 교직원, 예비인 이 사용할 수 있는 사용자메뉴가 맨 왼쪽 위에 바로 볼 수 있게 되었지만, 지금은 따로 클릭해야만 사용을 할 수 있고 한눈에 알아보기 불편하다고 생각합니다. 학교홈페이지의 메뉴 아래 첫 화면은 학교 이력, 학교의 높으신 분들의 사진, KNU 소식 등 사용자에게 덜 중요한 정보들보다는 학교 홈페이지를 많이 사용하는 사용자들을 위한 사용자메뉴, 학사일정, 공지, 장학, 취업 안내 등의 중요한 정보들이 맨 처음 화면에 이어야 한다고 생각합니다.
    이러한 UI 디자인으로 원하는 정보를 찾기 어려워져 전화하는 일이 많아졌습니다. 결국 학교홈페이지는 통합하면서 사용자를 배려하지 않고 불편하게 만들었고 관리자만 관리하기에는 쉬워졌다고 생각합니다.

    개성
    초기 앱들은 각자의 독특한 개성을 가진 레이아웃, 디자인을 사용하였지만, 트렌드, 편리, 많은 사용자 유치 등을 위해 대부분의 앱의 디자인들이 비슷하고 단순해졌다고 생각합니다. 페이스북, 인스타그램, 트위터와 같이 트렌드, 편리, 많은 사용자 유치 등만을 신경 쓰는 것이 아닌 본래의 디자인과 개성을 유지하면서 대중의 요구에 맞게 앱들을 발전시켜나가야 한다고 생각합니다.

  17. 일관성/Consistency
    평소 모바일로 무언가를 구매하고 소비하는일이 잦은데, 결제과정에서 여러번 창이 바뀌고
    버튼의 크기도 일정하지 않으며 실수로 창을 닫거나 이전으로 돌아가려할때 일관성이 부족해 느끼는 불편함이 있었습니다.
    무분별하게 뜨는 광고창또한 사용에 불편함을 느끼게 했습니다.

    시각적 계층구조/ Hierarchy
    학교홈페이지는 학교홍보를 위한 수단이 되기도하지만 궁극적으로 학생들을 위한
    공간이라는 생각을 합니다. 홈페이지 메인화면에 컨텐츠들이 잘 모여있는듯 보이지만
    정작 주로 학생들이 필요로하는 정보는 쉽게 찾기 어려운듯했습니다.
    또한 과한 움직임효과로 다소 산만한 느낌을 받았고
    움직임 때문에 더 여러번 정보를 확인해야하는 불편함이 있었습니다.

    개성/ Personality
    심플한 디자인을 좋아하는 저는 사용자를 위한 기본적인 규칙들을 정해서
    심플하지만 색감이나 여백을활용한 디자인적요소로 시각적으로 집중할 수 있고 앱이 가지고있는 개성을 살려
    사진보정앱이나 쇼핑앱을 디자인 하고 싶습니다.

  18. 일관성/Consistency
    우리 학교 앱을 예를 들면 학생들이 자주 들어가는 부분인 식단 조회 부분, 학과 시간표, 학생증 부분 등은 찾기 힘들게 숨어 있고 상대적으로 덜 필요한 대학 소개나 입학 안내 버튼들이 앱을 실행했을 때 가장 눈에 띄고, 매번 로그인을 해야 세부 내용을 사용, 조회할 수 있는 시스템도 매우 불편했습니다. 학교 학생들이 자주 써야 하는 앱인 만큼 개편이 필요해 보였습니다.

    시각적 계층구조/Hierarchy
    학교 홈페이지 중심부의 슬라이드를 비롯해 많은 정보들이 나열되어있는데 이들은 그다지 적절한 방식으로 보여지지 않는 것 같습니다. 학생들이 정말 자주 찾고 많이 들어가보는 부분을 중심으로 다시 구조화하여야한다고 생각합니다.

    개성 / Personality
    직방이나 다방 앱을 보면 처음의 앱의 목적이었던 매물의 가격정보와 방의 생김새, 주변 시설 파악이 전혀 되지 않고 있습니다. 앱 관리자가 허위 매물인지 실 매물인지 구분, 관리를 제대로 해놓지 않아 앱의 최초 목적을 잃은 모습을 보입니다. 제가 디자인 할 과제는 앱의 개발 목적 실현은 물론, 개발 후에도 지속적인 피드백 수용과 사후 관리를 토대로 오래가는 앱을 만들고 싶습니다.

  19. 일관성/Consistency
    요즘 들어 사용한 앱들은 사람들의 손이 많이 타서 업데이트도 자주 하여 큰 불편함을 느끼지는 못했습니다. 생각나는 앱을 예로 카카오톡이 생각납니다. 작년에 카톡 업데이트를 크게 한 적이 있습니다. 배열은 비슷했지만 환경설정 같은 세부적인 조정이 필요한 것은 조금 숨겨두고 필요한 것은 밖으로 내놓는 방법을 사용하여 적응한 지금은 익숙하지만 그 당시에는 너무 크게 바뀌어 불편했었습니다.

    시각적 계층구조/Hierarchy
    학교홈페이지는 예전보다는 많이 나아졌지만 아직 불편한 점은 많습니다. 이유를 생각해보면 많은 양의 정보를 보여주고 싶어하는 것 같습니다. 학교홈페이지는 학생들 또는 학부모님들, 교직원분들이 제일 많이 들어가는 것 같습니다. 교직원분들은 편할지 몰라도 아직는 학생 또는 학부모님들은 불편해하는 것을 보니 좀 더 접근성은 높이고 많은 정보는 줄이는 방향으로 나아가는 것이 불편한 해소에 도움이 될 것 같습니다.

    개성/Personality
    저는 일단 첫 번째로 접근성과 내용이 될 것 같습니다. 앱을 사용하는 데에 있어 주제에 맞는 내용이 들어가야 있어야 하고 내가 원하는 내용을 편리하게 찾는 것이 앱을 사용하는 분들이 원하는 방향 중 제일 중요하게 여길 것입니다. 두 번째로 배열, 간격 , 디자인 인것 같습니다. 아무리 내용만 좋아하지만 디자인은 먼저 눈에 보이고 느끼는 것 이라 생각하기에 그 앱에 맞는 느낌, 감각을 녹여 내고 싶습니다. 저는 그래서 주제에 맞는 내용이 들어있고 접근하기 쉬우며 앱에 맞는 감각을 녹여낸 것을 만들고 싶습니다.

Comments are closed.

you're currently offline