Don't Do That! Hunting Down Visual Design Smells in Complex UIs Against Design Guidelines

Just like code smells in source code, UI design has visual design smells. We study 93 don't-do-that guidelines in the Material Design, a complex design system created by Google. We find that these don't-guidelines go far beyond UI aesthetics, and involve seven general design dimensions (la...

Full description

Saved in:
Bibliographic Details
Published in:Proceedings / International Conference on Software Engineering pp. 761 - 772
Main Authors: Yang, Bo, Xing, Zhenchang, Xia, Xin, Chen, Chunyang, Ye, Deheng, Li, Shanping
Format: Conference Proceeding
Language:English
Published: IEEE 01.05.2021
Subjects:
Color
Design methodology
GUI testing
Guidelines
Material design
Software engineering
Training
UI design smell
Violation detection
Visualization
ISBN:1665402962, 9781665402965
ISSN:1558-1225
Online Access:Get full text
Tags: Add Tag
No Tags, Be the first to tag this record!
Abstract Just like code smells in source code, UI design has visual design smells. We study 93 don't-do-that guidelines in the Material Design, a complex design system created by Google. We find that these don't-guidelines go far beyond UI aesthetics, and involve seven general design dimensions (layout, typography, iconography, navigation, communication, color, and shape) and four component design aspects (anatomy, placement, behavior, and usage). Violating these guidelines results in visual design smells in UIs (or UI design smells). In a study of 60,756 UIs of 9,286 Android apps, we find that 7,497 UIs of 2,587 apps have at least one violation of some Material Design guidelines. This reveals the lack of developer training and tool support to avoid UI design smells. To fill this gap, we design an automated UI design smell detector (UIS-Hunter) that extracts and validates multi-modal UI information (component metadata, typography, iconography, color, and edge) for detecting the violation of diverse don't-guidelines in Material Design. The detection accuracy of UIS-Hunter is high (precision=0.81, recall=0.90) on the 60,756 UIs of 9,286 apps. We build a guideline gallery with real-world UI design smells that UIS-Hunter detects for developers to learn the best Material Design practices. Our user studies show that UIS-Hunter is more effective than manual detection of UI design smells, and the UI design smells that are detected by UIS-Hunter have severely negative impacts on app users.
AbstractList Just like code smells in source code, UI design has visual design smells. We study 93 don't-do-that guidelines in the Material Design, a complex design system created by Google. We find that these don't-guidelines go far beyond UI aesthetics, and involve seven general design dimensions (layout, typography, iconography, navigation, communication, color, and shape) and four component design aspects (anatomy, placement, behavior, and usage). Violating these guidelines results in visual design smells in UIs (or UI design smells). In a study of 60,756 UIs of 9,286 Android apps, we find that 7,497 UIs of 2,587 apps have at least one violation of some Material Design guidelines. This reveals the lack of developer training and tool support to avoid UI design smells. To fill this gap, we design an automated UI design smell detector (UIS-Hunter) that extracts and validates multi-modal UI information (component metadata, typography, iconography, color, and edge) for detecting the violation of diverse don't-guidelines in Material Design. The detection accuracy of UIS-Hunter is high (precision=0.81, recall=0.90) on the 60,756 UIs of 9,286 apps. We build a guideline gallery with real-world UI design smells that UIS-Hunter detects for developers to learn the best Material Design practices. Our user studies show that UIS-Hunter is more effective than manual detection of UI design smells, and the UI design smells that are detected by UIS-Hunter have severely negative impacts on app users.
Author Yang, Bo
Chen, Chunyang
Ye, Deheng
Xing, Zhenchang
Xia, Xin
Li, Shanping
Author_xml – sequence: 1
  givenname: Bo
  surname: Yang
  fullname: Yang, Bo
  email: imyb@zju.edu.cn
  organization: Zhejiang University, China
– sequence: 2
  givenname: Zhenchang
  surname: Xing
  fullname: Xing, Zhenchang
  email: shan@zju.edu.cn
  organization: Australian National University, Australia
– sequence: 3
  givenname: Xin
  surname: Xia
  fullname: Xia, Xin
  email: zhenchang.xing@anu.edu.au
  organization: Monash University, Australia
– sequence: 4
  givenname: Chunyang
  surname: Chen
  fullname: Chen, Chunyang
  email: xin.xiachen@monash.edu
  organization: Monash University, Australia
– sequence: 5
  givenname: Deheng
  surname: Ye
  fullname: Ye, Deheng
  email: chunyang.chen@monash.edu
  organization: Tencent AI Lab, China
– sequence: 6
  givenname: Shanping
  surname: Li
  fullname: Li, Shanping
  email: dericye@tencent.com
  organization: Zhejiang University, China
BookMark eNo1j09LAkEYhwcySM1PUIfp1Glt3vmzM3OU1VQQOqhBJ3k337WBdVacXapvn1CdfvDw8MBvwHqxicTYPYgxgPBPy2I908oLOZZCwlgIYc0VG0CeGy2kz2WP9cEYl4GU5oaNUgql0Np6ELnus7dpEx9bPm345gPbB77oYhvi4QI-I38NqcOaTymFQ-TrI9V14iHyojmeavri22XikwOGmNp_ad6FPdUhUrpl1xXWiUZ_O2Tb59mmWGSrl_mymKwylM60mTell4BoZVm5EjxWXu31u3UVgc1RAypFqiLhnUGpwecWrSgtCIfOg1ZDdvfbDUS0O53DEc_fO385D8qrHyU7Us0
CODEN IEEPAD
ContentType Conference Proceeding
DBID 6IE
6IH
CBEJK
RIE
RIO
DOI 10.1109/ICSE43902.2021.00075
DatabaseName IEEE Electronic Library (IEL) Conference Proceedings
IEEE Proceedings Order Plan (POP) 1998-present by volume
IEEE Xplore All Conference Proceedings
IEEE Xplore
IEEE Proceedings Order Plans (POP) 1998-present
DatabaseTitleList
Database_xml – sequence: 1
  dbid: RIE
  name: IEEE/IET Electronic Library (IEL) (UW System Shared)
  url: https://ieeexplore.ieee.org/
  sourceTypes: Publisher
DeliveryMethod fulltext_linktorsrc
Discipline Computer Science
EndPage 772
ExternalDocumentID 9402139
Genre orig-research
GrantInformation_xml – fundername: Australian Research Council
  funderid: 10.13039/501100000923
– fundername: National Science Foundation
  funderid: 10.13039/100000001
GroupedDBID -~X
.4S
.DC
123
23M
29O
5VS
6IE
6IF
6IH
6IK
6IL
6IM
6IN
8US
AAJGR
AAWTH
ABLEC
ADZIZ
AFFNX
ALMA_UNASSIGNED_HOLDINGS
APO
ARCSS
AVWKF
BEFXN
BFFAM
BGNUA
BKEBE
BPEOZ
CBEJK
CHZPO
EDO
FEDTE
I-F
I07
IEGSK
IJVOP
IPLJI
M43
OCL
RIE
RIL
RIO
RNS
XOL
ID FETCH-LOGICAL-a285t-95b921aa72bf8b19af93d4c78fe176a41a33e3fe0985a241967a70b7108a89143
IEDL.DBID RIE
ISBN 1665402962
9781665402965
ISICitedReferencesCount 37
ISICitedReferencesURI http://www.webofscience.com/api/gateway?GWVersion=2&SrcApp=Summon&SrcAuth=ProQuest&DestLinkType=CitingArticles&DestApp=WOS_CPL&KeyUT=000684601800062&url=https%3A%2F%2Fcvtisr.summon.serialssolutions.com%2F%23%21%2Fsearch%3Fho%3Df%26include.ft.matches%3Dt%26l%3Dnull%26q%3D
ISSN 1558-1225
IngestDate Wed Aug 27 02:21:08 EDT 2025
IsPeerReviewed false
IsScholarly true
Language English
LinkModel DirectLink
MergedId FETCHMERGED-LOGICAL-a285t-95b921aa72bf8b19af93d4c78fe176a41a33e3fe0985a241967a70b7108a89143
PageCount 12
ParticipantIDs ieee_primary_9402139
PublicationCentury 2000
PublicationDate 2021-May
PublicationDateYYYYMMDD 2021-05-01
PublicationDate_xml – month: 05
  year: 2021
  text: 2021-May
PublicationDecade 2020
PublicationTitle Proceedings / International Conference on Software Engineering
PublicationTitleAbbrev ICSE
PublicationYear 2021
Publisher IEEE
Publisher_xml – name: IEEE
SSID ssib044791064
ssj0006499
Score 2.421897
Snippet Just like code smells in source code, UI design has visual design smells. We study 93 don't-do-that guidelines in the Material Design, a complex design system...
SourceID ieee
SourceType Publisher
StartPage 761
SubjectTerms Color
Design methodology
GUI testing
Guidelines
Material design
Software engineering
Training
UI design smell
Violation detection
Visualization
Title Don't Do That! Hunting Down Visual Design Smells in Complex UIs Against Design Guidelines
URI https://ieeexplore.ieee.org/document/9402139
WOSCitedRecordID wos000684601800062&url=https%3A%2F%2Fcvtisr.summon.serialssolutions.com%2F%23%21%2Fsearch%3Fho%3Df%26include.ft.matches%3Dt%26l%3Dnull%26q%3D
hasFullText 1
inHoldings 1
isFullTextHit
isPrint
link http://cvtisr.summon.serialssolutions.com/2.0.0/link/0/eLvHCXMwlV1dS8MwFA3b8MGnqZv4TQTBF7v1I02aR9mH28sYbJP5NG7aVAuzk61Vf75J2iqCL741oZSQ3PacNPfcg9CN9AijzIssAW5oEbCFBcQnFqF-ZEPoKIgDYzbBJpNgueTTGrr71sJIKU3ymezoS3OWH23CXP8q63K12VGMpY7qjNFCq1XFDiFMAZ-m_uVXmBLjHangUu2SVNBqUZd22rVdTt2y1lPV9ktNnWPz7rg3GyiQNiIt1-kYTP3lvGKAZ9j835APUPtHwYen39h0iGoyPULNysIBl290Cz31N-lthvsbPH-B7BqPCucI1fGR4sdkl8Ma902SB569yvV6h5MU68es5SdejHf4_hkSxTCrmx5yXTZLp9K30WI4mPdGVum2YIEb-JnFfcFdB4C5Ig6EwyHmXkRCFsTSYRSIA54nvVjaPPBB4T6nDJgtFEMJIOCKdh2jRrpJ5QnClIbE05of0FYmtiNiiJmIAgleSIQvTlFLz9TqrSiosSon6ezv7nO0r5eiyDK8QI1sm8tLtBe-Z8lue2Wi4Atkl6l0
linkProvider IEEE
linkToHtml http://cvtisr.summon.serialssolutions.com/2.0.0/link/0/eLvHCXMwlV1dS8MwFA06BX2auonfRhB8sVs_0qZ5lH244RyDbTKfxk2b6qB2snXqzzdJ24ngi29NKCUktz0nzT33IHQtHEI96oQGBzswCJjcAOISg3huaEJgSYgDbTZB-31_MmGDDXS71sIIIXTymaipS32WH86DlfpVVmdysyMZyybacgmxzUytVUQPIVRCnyL_-XfYI9o9UgKm3CfJsFWyLuW1a9rMs_NqT0XbzVV1lsnq3cawJWFay7Rsq6ZR9Zf3ioaedvl_g95D1R8NHx6s0WkfbYjkAJULEwecv9MV9NycJzcpbs7x6BXSK9zJvCNkx2eCn2bLFcS4qdM88PBNxPESzxKsHhOLLzzuLvHdC8wkxyxuul-pwlkqmb6Kxu3WqNExcr8FA2zfTQ3mcmZbANTmkc8tBhFzQhJQPxIW9YBY4DjCiYTJfBck8jOPAjW55Cg--EwSr0NUSuaJOELY8wLiKNUPKDMT0-IRRJSHvgAnINzlx6iiZmr6npXUmOaTdPJ39yXa6Ywee9Net_9winbVsmQ5h2eolC5W4hxtBx_pbLm40BHxDWzerLs
openUrl ctx_ver=Z39.88-2004&ctx_enc=info%3Aofi%2Fenc%3AUTF-8&rfr_id=info%3Asid%2Fsummon.serialssolutions.com&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=proceeding&rft.title=Proceedings+%2F+International+Conference+on+Software+Engineering&rft.atitle=Don%27t+Do+That%21+Hunting+Down+Visual+Design+Smells+in+Complex+UIs+Against+Design+Guidelines&rft.au=Yang%2C+Bo&rft.au=Xing%2C+Zhenchang&rft.au=Xia%2C+Xin&rft.au=Chen%2C+Chunyang&rft.date=2021-05-01&rft.pub=IEEE&rft.isbn=9781665402965&rft.issn=1558-1225&rft.spage=761&rft.epage=772&rft_id=info:doi/10.1109%2FICSE43902.2021.00075&rft.externalDocID=9402139
thumbnail_l http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/lc.gif&issn=1558-1225&client=summon
thumbnail_m http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/mc.gif&issn=1558-1225&client=summon
thumbnail_s http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/sc.gif&issn=1558-1225&client=summon