Interaction Modes and SketchApp

Software interaction modes are the foundations of Software Interaction Design, which include (To remember those, I’ve a shortcut: AVFM-CCM):

  • Affordance
  • Visibility
  • Feedback
  • Mapping
  • Constraints
  • Consistency
  • Metaphors

I’ve taken an example of SketchApp (not as a whole but few of its functions) and tried to mirror


Property of an object, which allows an individual to perform an action (Don Norman used the term affordances to discuss the design of everyday objects in 1988)

How can you possibly use this thing?

SketchApp Affordance: At launch, the application represents an art-board, art-board orientation, Horizontal and vertical ruler, and some design tools. The toolbar on top header of the application afford to click (select and unselect). The Horizontal and vertical ruler let the user align the things. Sidebar on the left affords to add some new pages while right sidebar affords to change the page/art-board property. Sketch App has eliminated the scrollbars, so the rulers on X,Y axis afford to scroll accordingly.


Visibility is of major concern, especially when

  • Number of possible actions exceeds number of controls
  • There are invisible functions
  • There is a need for a reminder of what can be done

SketchApp Visibility The primary functions of the application are available on the top toolbar and are organised very well. All tools have their own associated title and visual button. The canvas on which the primary functions would be performed is being managed from left sidebar and the properties of the left canvas are being managed by right sidebar. While the primary art of the user remains centred.


Information for the user about the current system state, what has been done & current interaction possibilities

SketchApp Feedback The application supports feedback in almost every step (from opening application to publishing prototype). Major functions feedback include the pressed states of button, Intelligent guides when moving any object, Selecting associated layer from layer panel when any object is selected from art-board. Highlighting the ruler(x and y axis) when any object is selected in order to show its position within the art area. It also shows show in the title whenever there is any change in the sketch design file. Primary controls also have on hover title representation. See figure below:


Relationship between controls and the actions they trigger

SketchApp Mapping The actions, buttons, shapes and drawing tools like pencil, pen can be mapped with our physical analogy. Also the placement of tools is similar to physical wooden drawing board.


Restricts possible actions to prevent users from selecting incorrect options

SketchApp Constraints Two similar tools can not be at the same time e.g: if selected pen tool then shape tools can not be selected at the same time to draw. To upload the prototype over the cloud, it’s almost required to have an email account in advance that must be registered our the Sketch Cloud. There is another constraint which is the major one that user can not draw/design without selecting an art-board


Similar operations should use similar elements for similar tasks

SketchApp Consistency It follows both internal and external consistency. The application is symmetric with the Mac OS (Mojave Version 10.14.1 / 18B75). Mac OS mostly uses proximity law in the native applications. Sketch App replicate the proximity law within its user interface.


Interface is designed to be similar to something the user is already familiar with

Sketch App Metaphor When a person wants to draw a graphical element, s/he takes a drawing sheet, the Sketch App replicates the same metaphor if a user wants to draw any graphical element s/he would use art-boards within the application. When a user wants to draw freely something s/he would need brush or pencil tool within the app which replicates the metaphor of using brush or pen.