[해외교육] Euro IA 2013 둘러보기 - Day 1 : Usable Usability, Being in business with IA

2013. 12. 22. 03:45ㆍUI 가벼운 이야기
알 수 없는 사용자

pxd의 교육 프로그램의 일환으로, 2013년 9월 26~28일에 영국 스코틀랜드의 수도 에든버러에서 진행되었던 Euro IA 2013 컨퍼런스에 pxd Innovation Group 1의 Experience designer 두 명이 참가하였습니다.

총 3일 동안 워크숍과 강연으로 구성된 컨퍼런스의 주요 내용을 날짜별로 공유하려고 합니다. 그리고 나머지 교육 전후의 흥미로운 여행기도 함께 연재하려 하니 기대해 주세요. 
(컨퍼런스는 영어로 진행되었기 때문에, 대부분은 우리말로 바꾸어 보았습니다. 그러나 다소 어색할 수 있으니 양해 바랍니다. ^^)

Euro IA 2013 둘러보기 - Day 1
Euro IA 2013 둘러보기 - Day 2
Euro IA 2013 둘러보기 - Day 3
교육 전후 여행기 1 (예정)
교육 전후 여행기 2 (예정)

그럼 시작해 볼까요? ^ ^


Workshop 1.
Usable Usability — Lean UX Start Right Here presented by Eric Reiss 

Euro IA 2013의 첫째 날에는 본격적인 컨퍼런스에 앞서 워크숍 프로그램이 있었습니다. 첫 번째로 참여한 프로그램은 에릭 리스Eric Reiss의 Usable Usability입니다. 우리말로 바꾸면 '사용할 수 있는 사용성(감)' 정도가 될까요? 또한, 이 주제는 에릭 리스가 2012년에 같은 제목의 책으로 출간했습니다. 당초 워크숍일 것이라는 예상과는 다르게 튜토리얼 강의라서 당황했지만, 사용성에 대해 다시 떠올려 볼 수 있는 시간이었습니다.
강의는 Usability의 정의를 Ease of Use와 Elegance clarity라는 두 가지로 분류하고, 그에 해당하는 주요 항목에 대한 내용에 대한 설명과 주의할 점들을 중심으로 진행되었습니다. 개인적으로는 UX를 하면서 알고 있지만 정리하지 않았던, 그리고 배웠었지만 잊고 있었던 내용들이라, 강의 내용을 좀 무리해서(?) 정리해 보았습니다. ^^;; 
    What is Usability?(사용성이란 무엇인가?)

  1. "We make applications that let users put information in and get it out again. If a user can do this, then it's usable." -Anonymous developer-  
    (우리는 사용자가 정보를 입력하고 다시 그것을 얻을 수 있도록 응용 프로그램을 만든다. 사용자가 이 작업을 수행할 수 있다면, 그것은 사용가능하다고usable 말할 수 있다 - 익명의 개발자)
  2. "An automobile is a machine that moves people from one place to another. If it can do this, then it's usable." -My wife-
    (자동차는 한 장소에서 다른 장소로 사람을 이동시키는 기계다. 이 작업을 수행할 수 있다면 사용가능하다고usable 말할 수 있다 -나의 아내-)
  3. Usability is situational (사용성은 상황적인 것이다)
  4. "ease of use" : "It does what I want it to do" (physical)
    (사용 편의성 : 내가 무엇을 원하는지에 대한 것, 물리적 관점)
  5. "elegance and clarity" : It does what I expect it to do" (psychological)
    (간결한 명료성 : 내가 기대하는 것들에 대한 것, 심리적 관점)


* 아래 각 항목에 대한 상세 내용은 '더보기' 버튼을 선택하여 확인하세요.

1. Ease of Use(사용 편의성)

Ease of use = Functional + Responsive + Foolproof + Convenient + Ergonomic
(사용 편의성 = 기능적 + 반응 + 고장없는 + 편의성 + 인간공학적)

1) Functional(기능적)
- The buttons and links work when they are clicked(버튼과 링크가 클릭할 때 잘 연결되는지)
- The navigation is responsive(네비게이션이 제대로 반응하는지)
- The processing speed is acceptable(허용가능한 처리속도 수준인지)

2) Response(반응)
- When a button is clicked, you can see that it "reacts"(버튼을 클릭하면, 당신이 "반응"을 볼 수 있는지)
- When the page changes, you notice the change(페이지가 변경되면 변하는 것들을 확인할 수 있는지)
- Cursors and markers change when appropriate(적절한 때에 커서와 표식이 바뀌는지)
- In short, the application provides visual feedback(짧게 말하자면, 응용 프로그램이 시각적인 피드백을 제공하는지)

3) Ergonomics(인간공학)
12 principles of ergonomics(인간 공학의 12가지 원칙)
- Work in neutral postures(중립적인 자세)
- Reduce excessive force(무리한 힘을 감소)
- Keep everything in easy reach(쉽게 미칠수 있는 범위에서 모든 것을 유지)
- Work at proper height(올바른 높이에서 작업)
- Reduce excessive motions(과도한 움직힘을 감소)
- Minimize fatigue and static load(피로와 정적 부화를 최소화)
- Minimize pressure points(문제가 생길 곳을 최소화)
- Provide clearance(간격 제공)
- Move, exercise, and stretch
- Maintain a comfortable environment(쾌적한 환경 유지)
- Enhance clarity and understanding(명확성과 이해도 향상)
- Improve work organization

4) Convenient(편리한)
- The buttons are put where they are needed most(가장 필요한 곳에 버튼을 배치)
- Scrolling is kept to a minimum(스크롤은 최소로 유지)
- Related items are grouped together in the layout(관련 항목들을 그룹화)
- Elements that must be used simultaneously are also visible simultaneously(동시에 사용해야 하는 요소들을 동시에 볼 수 있도록)
- Alt tags let people know what unfamiliar icons will do. You can even use these to create small help boxes: This control lets you change the materials used in your construction(ALT tags는 사람들에게 익숙하지 않은 아이콘이 무엇인지를 알려준다. 당신은 이것을 이용하여 작은 헬프박스를 만들 수 있다 : 이 컨트롤은 당신이 생성한 것에 사용된 material을 변경할 수 있다)

5) Foolproof(풀 프루프): 제어장치나 제어계 시스템에 대해 인간의 오동작을 방지하기 위한 설계
- Help people avoid making mistakes(사람들이 실수를 방지하는데 도움)
- Don't rely on instructions!(지침/지시사항에 의존하지 마라!)
- Don't expect people to remember what they did to make it work the last time they used the application(사용자가 마지막으로 사용한 것을 기억할 것이라 기대하지 마라)
- There are three techniques : Remind(상기), Alert(경고), Force(강제)
- Customization vs personalization(맞춤화 vs 개인화)
     Customization : what I do to something(내가 원하는 무언가)
     Personalization : what the thing does because it thinks I might want this(내가 원할 수도 있는 것이니까 이뤄지는 것들)



2. Elegance clarity(간결한 명료성)

Elegance clarity = Visible + Understandable + Logical + Consistent + Predictable
(간결한 명료성 = 가시성 + 이해 가능한 + 논리적 + 일관성 + 예측 가능한)

1) Visible(가시성)
- If people don't see a control, it does not exist!(컨트롤을 볼 수 없다면, 존재하는 게 아니다)
- Use groupings and colors to create a visual hierarchy(시각적 계층 구조를 만들 수 있게 그룹화하고 컬러를 사용해라)
- Cut down the visual noise. Think "feng shui"(시각적 노이즈를 줄여라. 풍수를 고려해라)

2) Understandable(이해가능한)
The keys to creating shared references(공유하는 레퍼런스 생성의 핵심)
- Don't make anything for granted(당연하다고 여기지 마라)
- Answer the questions people may have(사람들이 할 수 있는 것들에 대한 질문에 답해보기)
- Anticipate questions they didn't think to ask(사람들이 궁금해할거라 생각하지 않았던 질문을 예상해보기)
- The communication environment will affect the information needed at any given time(커뮤니케이션 환경은 언제든지 요구된 정보에 영향을 미칠 것이다)

3) Logical(논리적)
- Deductive reasoning(연역적 추리)
- Inductive reasoning(귀납적 추론)
- Retroductive inference(환원적 예측)

4) Consistent(일관성)
- Always call things by the same name: Save = Save ≠ Submit
(항상 같은 이름으로 호출하도록 해야 함 : 저장 = 저장 ≠ 제출)
- Don't reuse icons for different functions (다른 기능 아이콘을 재사용하지 말 것)
- Don't change the behaviour of objects as they open and close on a page(페이지에 가까운 개체 동작을 변경하지 말것)
     Look the same = behave the same(동일하게 보이기 = 동일하게 동작해야함)
     Look different = behave differently(다르게 보이기 = 다르게 동착해야함)

5) Predictable(예측)
- Make sure that functions and navigation always appear in the same place(기능과 탐색은 항상 같은 위치에 나타나는지 확인해야 함)
- People need to know where they can expect to find things(사람들이 원하는 것을 찾을 수 있도록 예상할 수 있어야 함)
- Use your design to let people know ahead of time how many steps there are in a process(처리 중에 어느 단계에 어느 정도 소요되는 지 사람들이 알 수 있도록 디자인해야 함)
- Make sure to let them know where they are in a multistep process(여러 단계 속에 어디에 있는지 확인할 수 있도록 해야 함)


이렇게 강의는, 우리 주변의 작은 것들부터 시작하는 사용성에 대해 사례와 함께 생각해 보면서, 사용성 문제를 발견하고 해결해가는 가이드에 대해 들을 수 있는 의미 있는 시간이었습니다.



Workshop 2. 
Being in Business with IA — Delivering Cross-channel UX presented by jason hobbs and Andrea Resmini 

에릭리스의 프로그램이 끝나고, 오후에는 안드레아Andrea Resmini와 제이슨Jason Hobbs이 함께 진행하는 Being in Business with IA라는 프로그램에 참석했습니다. 

프로그램 구성

Session 1 : 인포메이션 아키텍처Information Architecture가 각자에게 어떻게 정의되고 있는지 참여자들 각자의 관점과 생각을 논의
Session 2 : 워크숍 참여자들과 간단히 실습

에릭리스의 워크숍은 교과서적인 내용을 가지고 굉장히 체계적인 흐름의 강의를 듣는다는 느낌을 받았던 반면, 이 워크숍은 진행자 두분의 난상 토론격 대담식으로(게다가 매우 빠른 속도의 영어로!), 자유로운 분위기에서 진행되었습니다. 

강의의 주요 내용과 현장 스케치를 공유합니다. 


Session 1 : What is Information Architecture?
What is 'Information Architecture'?(인포메이션 아키텍처는 무엇인가?)
  1. Everything is design(모든 것이 디자인이다)
  2. The complexity of the world we live in steadily increasing(우리는 복잡성이 점점 더 증가하는 세상 속에 있다)
  3. The problems we face are systemic and grounded in social reality(우리가 직면하는 문제들은 조직뿐만 아니라 사회적 리얼리티에 기반하고 있다)
  4. Design is battling to respond in it's current siloes(graphic, industrial, architectural, digital) (디자인은 현재의 사일로siloes(그래픽, 산업, 건축, 디지털)에 대응하기 위해 다투고 있다.)
    * 여기서 사일로는 조직이기주의와 조직장벽을 빗댄 용어입니다.
    http://terms.naver.com/entry.nhn?docId=1914350&cid=2897&categoryId=2897

Design에 대해
  1. Research-Strategy-Design= "Design"
  2. : For simpler problems this process is performed at an intuitive level by designers.(간단한 문제의 경우, 이 과정이 디자이너의 직관적인 레벨에서 수행된다)
  3. : Complex problems however, require tools that can tackle the complexity explicitly(복잡한 문제가 있으면, 명시적으로 복잡성을 해결할 수 있는 도구가 필요하다)
  4. 리서치 과정 중에서 엄청나게 많고 복잡한 데이터를 얻는다.
  5. 디자이너는 이것들을 이해할 수 있게 구성하고 조직한다.
  6. 그리고 이 과정을 엮어서 결과적으로 솔루션을 제시한다.

Information Architecture
이 모든 것이 인포메이션 아키텍처Information Architecture 아닐까?
 
우리가 이렇게 문제를 발견하고 정의하고 해결하는 과정을  IA라고 인식하지 않는 이유는 우리는 일반적으로 IA를 '디지털적인 것Digital thing'이라 간주하기 때문이고, 포지셔닝 자체가 디자인 영역으로 되어있지 않기 때문이다.
(오히려 정보Information나 도서관학Library Science을 지향한다)


Session 2 : Workshop 
워크숍은 주제는 "Visit Inverness" campaign으로, 다음의 시나리오와 조건이 주어졌습니다.
* 인버네스Inverness는 영국 스코틀랜드 하이랜드Highland에 있는 도시입니다. http://www.inverness-scotland.com/
The city council wants to establish yet-undecided tourist-oriented services and support and promote a "Visit Inverness" campaign.
( 시의회는 관광 중심의 서비스를 구축하고 지원하기 위한 "인버네스 방문" 캠페인을 추진하려고 합니다)
  1. 인버네스에는 괴물이 살고 있다는 전설이 있다. 이를 활용하라.
  2. 이 서비스의 대상자는 지역 주민이 될 수도 있고 외부인일 수도 있다.
  3. 어떤 입장의 서비스 제공자가 될 지는 각 조에서 알아서 선택하라. 여행사가 될 수도 있고, 여행사에게 의뢰받은 서비스 컨설턴트 혹은 정부기관이라고 생각해도 된다.


Workshop 현장 스케치
실습은 A, B, C 3개 조로 나뉘어 팀 작업으로 진행하였습니다.
먼저 낯선 곳으로 여행을 가게 되면 그 지역의 정보를 어떻게 얻는지, 아이스-브레이킹 토크Ice-breaking talk를 하면서 정보를 얻는 채널 리스트를 작성했습니다.
그리고 이후에는 어떤 가이드도 주지 않고 진행과정 자체를 조별 재량으로 열어둔 상태로 진행했습니다. 저희 조는 전략과 솔루션을 내자는 큰 목표하에,
여행 상품 서비스의 이해관계자들과 그 관계속에 발생하는 이슈들을 고민해보기도 하고
구체화 방안에 대해 시각화 작업도 해보고,
이것저것 다양한 인포메이션 아키텍팅Information Architecting을 하면서 즐겁게 작업했습니다. 왼쪽부터 영국여자, 러시아남자, 미국남자, 영국남자..^^
조별로 다양한 시작점을 가지고 문제를 풀어낸 각자의 개성이 드러난 발표를 들을 수 있었습니다.

이 워크숍에서 전달하고자 했던 바와 인상깊은 구절을 다음과 같이 정리해보았습니다. 

  1. 일반적으로 IA라는 것은 웹과 같은 디지털 환경에서의 구조 설계라고 인식하고 있지만, 어느 채널에서나 응용되는 작업이다.
  2. 우리가 인포메이션 아키텍처로서 내는 결과물은, 작은 데이터 단위를 사용하여 새로운 구조와 공간 솔루션을 도출하는 (굉장히)창의적인 일이다.
  3. And in doing so, we design meaning.
    (그렇게 함으로써, 우리는 의미있는 것들을 디자인한다)

덧)
이번 컨퍼런스에서는 우리가 평소 부르는 UI나 UX라는 용어보다는, 유독 Information Architecture라는 용어를 많이 언급하고 있었습니다(다음에 연재될 블로깅에서도 Information Architecture 주제에 대한 강연이 있습니다). 특히 현장에서 다른 참가자들과 서로에 대해 인사할 때, 저희는 '나는 UI 디자이너야' 또는 '나는 UX 디자이너야'라고 소개하면, 상대방은 '나는 인포메이션 아키텍처야' 또는 '나는 인포메이션 아키텍팅을 해' 라고 하는 경우가 꽤 있었습니다. 인포메이션 아키텍처는 무엇인지, 우리가 알고 있는 정보설계라는 것이 어디까지 포함하는 것인지 고민하게 되었는데요, 이 강연에서는 인포메이션 아키텍처를 UI/UX이 담고있는 내용과 거의 유사한 관점으로 보고 있었고, 특히 채널범위의 확장을 얘기하고 있었습니다.



이렇게 두 가지 프로그램에 참여하면서, 첫째날의 일정을 마무리하였습니다. 다음 블로깅에서는 두번째 날에 진행되었던 컨퍼런스 현장과 강연에 대해 공유드리겠습니다. 유럽의 IA 공동체에서는 어떤 테마들에 대해 관심을 갖고 있고, 어떤 프로젝트를 시도했는지 궁금하다면 다음 블로그 포스팅을 기대해 주세요. ^^
[참고##해외교육##]

관련글

댓글 2

티스토리툴바