동일한 이슈를 다루는 신문사별 논조의 차이를 비교해 볼 수 있어서 네이버의 뉴스캐스트를 좋아합니만 뉴스캐스트의 아이폰앱은 아쉬운점이 많습니다.
뉴스를 보기 위해 기사를 클릭하면 작은 모바일화면에 빽빽히 광고로 도배되어 로딩도 더딘 신문사 웹페이지로 던져져서 참담한 기분이 들어도 뭐 그게 뉴스자체는 신문사에 위임하고 전혀 가공하지 않겠다는 정책때문이라면 어쩔 수 가 없지요. 뉴스캐스트가 하는일은 신문사들의 기사들을 모아주는것이니까요.

하지만 그렇더라도 신문사별 기사를 훑어보는 일을 조금이라도 쉽게 해줄수는 없는지 고민이 필요해보입니다. 모든 신문을 단순히 목록으로 쭉 펼쳐두어서는 원하는 기사를 찾기가 어렵거든요. 긴 목록을 플리킹하는건 전혀 즐겁지가 않아요. 뉴스캐스트의 취지처럼 정보단위가 개별기사가 아닌 신문사라면 네이버 웹페이지의 오픈캐스트의 carousel 형태로 페이징을 할 수 있도록 하는게 나을것 같습니다.

pc에서는 익숙하고 간편한 스크롤 대신에 반응도 더디고 답답한 carousel 형태를 취하고 carousel형태가 적합한 모바일 화면에서는 스크롤 목록 방식을 선택하고 있습니다. 뭔가 반대로 가고 있는것 같아요. 트랜드보다는 환경에 맞는 디자인패턴을 선택할 필요가 있을것 같습니다.

아이폰 뉴스캐스트 앱

pc 오픈캐스트 웹페이지

휴대폰으로 인터넷이 되면서 이제 어디서나 블로그에 올라온 맛집 리뷰를 읽고 근처의 괜찮은 맛집을 찾아보고
전화번호를 찾아 예약을 하고 빠른 길을 비교해 볼 수 있게 되었습니다.

그런데 그렇게 쉽지만은 않더라구요.

한상차림이 아닌 부페식 검색 결과를 그대로 작은 화면에 옮기는것만으로는 실제 모바일 환경에서 사용할때 아쉬운 부분이 많이 있는것 같습니다. 음성인식과 비전인식검색등 새로운 기술이 빠르게 발전하고 있지만 우선 가지고 있는 정보를 어떻게 효율적으로 잘 보여줄 지에 대한 고민이 많이 필요한 것 같고요.

더 게을러지기 전에 동영상 먼저 공유하고 차근차근 회사 블로그에서 모바일 UI 디자인 패턴에 대한 얘기를 진행하겠습니다.

프로토타입은 혼자 쓰려고 만든거라 어느 정도 인터페이스 디자인이 정리 되면 공개하고 서비스를 할만한 여력이 안되면 오픈소스 프로젝트로 돌릴 계획입니다.

키워드가 잘 생각나지 않거나 타이핑하기 귀찮을때 검색엔진의 키워드 추천 기능은 정말 유용하다. 구글이나 다음은 suggest라는 이름으로 네이버는 자동완성이란 이름으로 서비스를 제공한다.

네이버는 기본적으로 unix shell의 tab complete을 모델로 한것 같다. 실제로 tab키로 채워지는것은 방향키만을 사용하는 구글이나 다음과는 다르다.

하지만 보통 자동완성 autocomplete 이라고 하면  tab이나 방향키같은 명시적인 채움명령없이 "자동"으로  채워지는 방식을 말한다.  영어같은 경우는 in-line complete으로 입력라인에 바로 나머지 부분을 채워주며 채워진 부분을 선택하여 두어 혹시 의도하지 않은것이라도 쉽게 수정할 수 있도록한다. 하지만 자소를 조합하는 우리말에는 적용할 수 없다. 대안으로 아이폰 autocorrect 같은 버블 방식을 생각할 수 있다.

 
자동완성은 의도하지 않은 값을 제안하거나 잘못된 완성을 쉽게 바꿀 수 없으면 오히려 엄청 불편해진다. 검색엔지의 키워드 서제스쳔에서는 어떨까? 정말 자동으로 키워드가 완성되는게 편할까? 편하다.
http://www.informationredesign.com/autocomplete/

지하철 플래폼내의 안내판이 신형 lcd로 교체되고 하단에 열차운행 정보그래픽이 항상 제공되고 있습니다. 열차가 언제쯤 도착할지 가름할 수 있어서 참 좋습니다.

다만 열차의 행선지는 메인화면에 여러 정보가 로테이션 되다 한번정도 표시되고 있어 내가 탈 열차인지 확인하려면 한참을 기다려야 해서 좀 답답합니다.(짧은 구간으로 아무 열차나 타도 되는 경우는 아무 문제 없지만요)


지하철 도착 안내

일상적인 라이프스타일에 관한 정보를 얻을 때는 네이버 블로그를 사용합니다. 보통 포토 다이어리식 리뷰가 많아  사진이 검색 결과를 선택하는데 중요한 역할을 합니다.


블로그 검색결과 정보디자인

원본



네이버블로그 검색결과의 정렬

네이버 블로그 검색결과에서 제목은 사진에 종속적으로 사진에 따라 들쑥 날쑥합니다. 블로그에서 사진은 본문만큼이나 중요한 컨텐트이긴 하지만 그것이 무엇인지를 설명하는 제목이 없으면 무의미합니다. 정보의 중요도와 시각적 위계가 맞지않습니다.

맨 아래줄에는 포스트url과 블로그명을 적고 있습니다. url은 블로거의 계정과 일련번호의 게시물 주소로 구성되어 있는데 보통 사람이 봐서는 정보를 얻기 어렵습니다. 정보로써 더 의미가 있는 블로그명은 흐리고 정렬도 안되어 읽기 어렵습니다.

보통의 블로그 검색에 하나의 썸네일을 제공하는 반면에 네이버 블로그 검색은 훨씬 많은 썸네일 이미지를 제공합니다. 마우스 오버를 통해 여러장의 사진을 볼 수 있어 블로그로 이동하지 않아도 전체적인 분위기를 알 수 있도록 합니다.


인포메이션리디자인



리디자인

우선은 마우스오버를 하여야 하는 본문내의 사진을 한꺼번에 보여주도록 하였습니다. 네이버의 정보 노출 방식은 stacked in time 입니다. 트래픽을 효율적으로 사용할 수는 있겠지만 사용자에게는 귀찮습니다. 가능하면 정보는 공간상에 늘어놓아 한눈에 볼수 있도록 하는것이 좋습니다. 몇개의 사진을 보여주는게 좋을까 테스트를 해보았는데 3개까지는 왠지 비슷비슷하고 4번째 사진이 보여야 전체적인 느낌을 알 수 있는것 같습니다.

레이아웃은 빨래줄을 사이에 두고 정보를 정렬하도록 하였습니다. 사진을 제목의 다음줄에 두고 좌측정렬하여 하나의 정보 덩어리로 한눈에 들어오게 하고 부가적인 정보는 오른쪽으로 정렬하였습니다. 블로그명만을 표시하고 url은 없애버렸습니다.


동영상


검색은 한페이지로 구성되어 있습니다. 결과를 보기 위해 페이지를 아래로 스크롤하면 다음페이지의 결과를 계속 이어서 보여줍니다.
네이버블로그 검색에는 대표썸네일 이미지를 표시하는데 에러가 생기면 이빨빠진듯이 비워두는데 리디자인에서는 썸네일목록의 다음 이미지를 불러와 채워줍니다. 모든 이미지에 문제가 있으면 아예 동적으로 페이지를 다시 읽어 썸네일을 표시합니다.


첨부 미디어파일 검색결과 표시

현재는 본문의 첨부 이미지만을 보여주고 있는데 첨부된 동영상이나 지도를 노출시켜 주었으면 합니다. 블로그에서 업소를 추천받고 위치를 찾기위해 다시 검색하는 경우가 많습니다. 네이버지도를 첨부한 블로그가 이제 꽤 되는것 같은데 이쯤해서 검색에서 보여주면 좋지 않을까 싶습니다. 수익사업인 프리미엄지역정보(광고)와 경쟁이 되는 전략적인 이유인지도 모르겠지만요.

추가 2011.07)
좀 된 것 같은데 네이버 블로그 검색에 동영상과 지도 포함 여부가 표시되네요. 동영상 썸네일을 이미지 썸네일과 함께 표시하는건 좋은데 순서가 밀리면 동영상 포함 여부를 알 수 없게 되네요. 첫번째가 아니면 마우스오버하긴 전에는 알 수 없고요. 지도처럼 별도 표시가 되면 좋겠습니다. 네이버 동영상만 말고 기왕이면 유투브나 다른 첨부 동영상도요
 

------
참고

1.본문내 이미지를 인덱싱하지 않는 검색엔진입니다.

구글


구글은 사람이 알기 쉬운 정보인 블로그명을 url보다 먼저보여줍니다.

나루



technorati




2. 사진을 좌측정렬하여 제목을 들쑥날쑥 표시합니다.

네이버


다음


이 블로그에서만 검색, 이 블로그 글 전체보기 같은 기능은 유용하겠지만 결과 페이지에서는 노이즈인것 같습니다. 아이템을 선택한 이후의 기능이니까 마우스 오버한 후에 보여줘도 충분할것 같습니다.

엠파스



3. 정렬을 위해 사진 영역을 고정하거나 사진을 크랍핑합니다. 하지만 사진이 없으면 정렬이 깨집니다.

야후


올블로그


이올린