User:Andrew/LayoutPatterns: Difference between revisions

    From KDE UserBase Wiki
    Line 14: Line 14:
    ** [https://techbase.kde.org/Projects/Usability/HIG/SearchPattern Search and Filter] - Patterns for exposing search and Filter functions
    ** [https://techbase.kde.org/Projects/Usability/HIG/SearchPattern Search and Filter] - Patterns for exposing search and Filter functions
    ** [https://techbase.kde.org/Projects/Usability/HIG/IconsAndText Icons and Text] - Patterns for consistently showing icons with text
    ** [https://techbase.kde.org/Projects/Usability/HIG/IconsAndText Icons and Text] - Patterns for consistently showing icons with text
    ** [[User:Andrew/LayoutPatterns/ViewandEdit|View and Edit]] - Patterns for showing content that is primarily viewed but is occasionally edited.
    ** [[User:Andrew/LayoutPatterns/ViewandEdit|View and Edit]] - Patterns for showing content that is either primarily viewed or primarily edited.
    ** [[User:Andrew/LayoutPatterns/Wizard|Wizard]] - Patterns for guiding the user through a series of step to accomplish a task
    ** [[User:Andrew/LayoutPatterns/Wizard|Wizard]] - Patterns for guiding the user through a series of step to accomplish a task
    ** [[User:Andrew/LayoutPatterns/Tooltips|Tooltips]] - Patterns for consistent presentation of information that pops up when the mouse is over an item.
    ** [[User:Andrew/LayoutPatterns/Tooltips|Tooltips]] - Patterns for consistent presentation of information that pops up when the mouse is over an item.

    Revision as of 19:33, 22 July 2014


    Purpose

    Layout patterns provide an aid to designing applications that maintain both visual and functional consistencies that are appropriate for the functionality and content of the application.

    Guidance

    The top level layout for your application may be constructed by selecting an appropriate Command Pattern and Navigation Pattern as well as taking advantage of recommended Content Patterns.

    • Command Patterns are determined by the command structure chosen for the application (simple, complex or very complex).
    • Navigation Patterns depend on the structure of the application content (flat, 2-deep, 3-deep, n-deep).
    • Content Patterns are a collection of consistent ways to present content
      • Images - Patterns for displaying images with captions
      • Search and Filter - Patterns for exposing search and Filter functions
      • Icons and Text - Patterns for consistently showing icons with text
      • View and Edit - Patterns for showing content that is either primarily viewed or primarily edited.
      • Wizard - Patterns for guiding the user through a series of step to accomplish a task
      • Tooltips - Patterns for consistent presentation of information that pops up when the mouse is over an item.


    See the layout pattern example that shows how to contstruct the layout for photo gallery application.

    Plasmoid Layouts

    Plasmoids like panel popups and desktop widgets should meet the following criteria:


    Methodology

    Applications Survey

    An extensive survey of a broad range of desktop applications was conducted. The survey activity included identifying the type and layout characteristics of each application. The types of applications surveyed were:

    Video player, Audio/Music player, Image browser, Image editor, Web browser, File browser, Settings, Text editor, IDE, Document editor, Document viewer, Games, Email, Address book, Chat client, Calendar, Video conference, Audio/Video editing, Terminal, Calculator, Clock, System Monitor, Archiver, Mapping/Directions, Software installer/remover, Dictionary


    Industry Guidelines Review

    Several published guidelines were reviewed to identify common industry layout guidance and to help validate some of the guidance provided in these guidelines. The industry layout guidelines surveyed include:

    • GNOME HIG
    • Windows Design Guidelines
    • Google Design Guidelines
    • Android Design Guidelines
    • OS X HIG
    • iOS HIG