UI导航模型 UI Navigation Model

Face it, UI navigation is hard. It takes a lot of efforts to get it right, and much more to user-friendly. Anyway, still we can find common scenarios and analyze to find patterns.

The scenario: the user clicks 'Show CM2' while CM1 is the currently displayed.

image

Pseudo-code:

If(menu.selectedCM == currentCM) {
  return;
}else{
  if(currentCM.isDirty) {
    ret = showConfirmDialog();
    switch(ret) {
      case saveAndForward: 
        // very complicated, do not show this option at all.
      
      case discardAndForward:
        currentCM = menu.selectedCM;
        
      case cancel: // veto
        menu.selectCM = currentCM;           
    }
  }else{
    currentCM = menu.selectedCM;
  }
}

A few noticeable points:

  • saveAndForward option should not be shown in the confirm dialog. You might have seen this option in the confirm closing dialogs of word processors. The fact is that word processors are extremely simple applications in terms of model and UI options. For word processors, the save command saves the text and other objects into a file. However, for complicated applications, the user need to fill many inputs and there are quite a number of validation criteria. There is no generic save options for such applications. Thus saveAndForward should not be an option at all.
  • cancel: when the use select the cancel option, the system should revert the selection to the previous state. Otherwise, the menu and the content are out of synchronization.