  -
 


  -,       -   ,    .      -       ,       ,    .     ,       ,           .         -.





 

  -








   







    :

     ,  ,  ,         ,     .         .      -    ,    , ,  ,      ;

        ,           ;

   Elsevier:  ,  ,        ,    ,         ;     ,  ,         ,    ;    ,         ,       ;

 ,   ,  , ,    ;

                     ,         ;

         ,  ,       ,      ,        .



 




 


       Alpha Cube, Inc.,          .      ,         -.

      14         ,    , ,     .

            -, -         .

    ,           (   -  ).                  , .




 1










       -,          (, Internet Explorer, Firefox, Safari  Opera).     -,    (hosted applications)  ,          (SaaS)[1 - SaaS      ,     -,       ( ,   ),       .          ;      .]    (cloud computing)[2 - -      ,         ,      ,        .].  -     -   ,          ,    ,  ,  ,  ,  ,  ,    . . (. 1.11.4). -, ,              (. 1.5).




. 1.1.            Yahoo! Mail,           ,  Microsoft Outlook, Mozilla Thunderbird  Eudora






. 1.2.             -,   Expedia






. 1.3.     ,     ,         .       ,  Zillow.com






. 1.4.       ,  Buy.com






. 1.5.       Ultragrain         (www.ultragram.com (http://www.ultragram.com/))




 -


 -  ,     .       (Baxley, 2003; Turnbull, 2006).


 

      ,    ,      -,   ,   Internet Explorer, Firefox, Safari  Opera.   -,         ,            ,   Adobe Flash, Java, Microsoft Silverlight  . .,       -.

 ,    ,      ,     ,      -    ,      ,    .    ,         ; ,      ,   Delicious (www.delicious.com (http://www.delicious.com/))  Furl (www.furl.net (http://www.furl.net/)),          ,     ,   Google Docs and Spreadsheets (docs.google.com)  Zoho (www.zoho.com (http://www.zoho.com/)).


 

-        ,    ,    ,        ( ).      -        ,    .           ,  ,       Windows, Macintosh OS X, GNU/Linux    .


   

    ( 16     1995    1,5     2008     Internet World Stats www.internetworldstats.com (http://www.internetworldstats.com/))  ,           .        -, ,  , , , , ,    . .         ,    -    ,        (,   ,  ,      ).  ,   -         .


        -

     -         -   , HTML, CSS  JavaScript   .   .  -   ,     ,     , .  ,        ,      .    Website Optimization,    ,     ,   2008    57 %,         90 % (www.websiteoptimization.com/bw/0807/ (http://www.websiteoptimization.com/bw/0807/)).           ,   -.




     -


       ,    -  .            ,     -  ,    ,  -      ,        ,  ,       .


  -

 ,     -      .  -  :   -   -,           ,       .   -       -,    -  -.     ,        ,        .

         ,     ,    ,       .      -    . , ,   ,     , ,     ,               .            ,   JavaScript   - (Rich Internet Applications, .  8),          -.


   ,  ,    

    HTML ( 4.01)      ,  , ,       .      ,    ,    , ,  , ,  , ,  ,  , -   . .,       .          JavaScript     (Cascading Style Sheets, CSS),          ,   .


  

    ,               -,           .     -  ,        ,       ,       ; ,    Macintosh OS X Aqua    ,     Windows Vista (. 1.6).




()






()



. 1.6.    Macintosh OS X Aqua (a)   



          ,           ,         .    ,          ,         ,   ,        (. , 2008).   1.7       Zoho Notes (-  ,   Microsoft OneNote)  Zoho Sheet (-    ,   Microsoft Excel).      Zoho Notes,       ,      Rename ().      Zoho Sheet,            Rename (),    ,    ;              .




(a)






()



. 1.7.             Zoho Notes (a)   Zoho Sheet ()







HTML5     ,        Web Forms 2.0,   World Wide Web Consortium (W3C) (www.w3.org/TR/web-forms-2/ (http://www.w3.org/TR/web-forms-2/)).        (,  <datalist>       <output>  ,   ,     ),           (, <inputtype="date"/>, <input type="email"/>  .),     .  Opera ( 9  )   Web Forms 2.0        .


       ,       ,                  -.

         -     .     ,       (,    ;     ;  )      (,        ).   ,                   (, Macintosh OS X Aqua  Windows Vista)   ,    (,         Oracle: Oracle Browser Look and Feel [BLAF] Guidelines, 2004),           .

            ,        ,         . ,        Apple: Human Interface Guidelines      400 ,        ,          3, : Part III: The Aqua Interface (. 1.8),    250 ,   .




. 1.8.   III:          Apple   250  400  



            ,     ,         .            -,    ,    , , ,   ,    ,                .

                          ,          -.




 


              :   (Alexander et al., 1977)     (Alexander, 1979).      :



        ,         ,      ,          .

Alexander et al., 1977, . x

 ,             , ,       .         ,        .

             [3 -        ,           .      ,  ,      (    GoF,  . Gang of Four   ):  - .   (, 2007).           ,     (Tidwell, www.designinginterfaces.com (http://www.designinginterfaces.com/)),  (Welie, www.welie.com (http://www.welie.com/)),  (Borchers, 2001),  (Graham, 2003)    (Van Duyne et al., 2002, 2006).],    .

       .     ,        .  ,   ,      ,    ,    ,  ,        .      ,    -   ,          .

   .             ,  ,     .  ,                (.  13),   ,     ,      .

      .               .      ,      ,             ,     ,      .        ,    , ,       (Leacock et al., 2005)         (Borchers, 2001).

 ,   .                          (Borchers, 2001; Erickson, 2000).   ,         ,      ,         ,                .

      .             ,         (Chen, 2003).               .

    -.   ,       ,     -   ,    ,    ,  .




 


,     ,       ,    ,            ,    .    ,    -     (.  13).     ,   ,           (Borchers, 2001; Graham, 2003; van Duyne et al., 2002, 2006),  ,    ,   ,  (Laasko, 2003); , 2008; www.welie.com (http://www.welie.com/)) [4 -                         ,   CHI 2003      XML   Pattern Language Markup Language (PLML;   -).    , .   (Fincher, 2003).].

       .  ,     :

  .  ,   .          ,      .        ,                  (    ).

 .   () ,   ,        ,      .

 .    .     (. . ),    (. .  ),     -.

 .     .

 .     ,       .         , ,         .

   .     ,          ,      ,      ,       ,  ,       .




    


        .

 2: .     .     ,    ,  ,  ,   ,       -.      ,      -      ,      ,          .   ,  CLEAR BENEFITS, SHORT FORMS, LOGICAL GROUPING, LABEL ALIGNMENT, REQUIRED FIELD INDICATORS, SMART DEFAULTS, FORGIVING FORMAT, KEYBOARD NAVIGATION, INPUT HINTS/ PROMPTS, ACTION BUTTONS  ERROR MESSAGES.

 3:  . -            .   ,               .      ,         -,  REGISTRATION, CAPTCHA, LOG IN, LOG OUT, AUTOMATIC LOGOUT  FORGOT USERNAME/ PASSWORD.

 4:   .              ,         ?     ,            ,   INBOX, CONTROL PANEL, DASHBOARD, PORTAL, PERSONALIZATION, CUSTOMIZATION  BLANK SLATE.

 5: .    ,     -.     ,    (. .   )       ,       .          ,   PRIMARY NAVIGATION, SECONDARY NAVIGATION, UTILITY NAVIGATION, FACETED NAVIGATION, SUPPLEMENTARY NAVIGATION, TAG CLOUDS, BREADCRUMBS  WIZARDS.

 6:   .   -                 .      -   ,        ,   .   ,     , ,  ,    .                  .       ,        -,   SIMPLE SEARCH, PARAMETRIC SEARCH, ADVANCED SEARCH, SEARCH TIPS, SEARCH RESULTS, SORTING, PAGINATION, CONTINUOUS SCROLLING, FILTERING, FACETED SEARCH  SAVED SEARCHES.

 7: .    ,     .      ,    ,      .           ,   SIMPLE LIST, TABULAR LIST, HIERARCHICAL LIST, EVENT LIST, TIMELINES, IMAGE LIST/ GRID, MAPS, LIST ACTIONS  LIST UTILITY FUNCTIONS.

 8:  -.  - (RIA)       ,     ,     ,            ;         .            -,    RICH-TEXT EDITOR, RICH FORM, AUTOSUGGEST/ AUTOCOMPLETION, EDIT-IN-PLACE, OVERVIEW-PLUS-DETAIL, DYNAMIC QUERYING, LIVE PREVIEW, DRAG-AND-DROP, SLIDER, ANIMATIONS/TRANSITIONS, DELAY/PROGRESS INDICATOR, SPOTLIGHT/YELLOW-FADE  CAROUSEL

 9:  .     -     ,     ,          (, , ,   . .),        .       ,        ,  ADD/UPLOAD CONTENT, TAGGING, RATING, REVIEWS, VOTE TO PROMOTE, USER PROFILE, REPUTATION, DISCOVER NETWORK MEMBERS, FRIEND LIST, GROUPS/SPECIAL INTEREST COMMUNITY, MESSAGING, PRESENCE INDICATOR, SHARING  COLLABORATION.

 10: .                    .    ,    ,           .       ,              ,   EXTENSIBLE DESIGN, DATE FORMAT, TIME FORMAT, NUMBER FORMAT, CURRENCY AND CURRENCY FORMAT, GLOBAL GATEWAY  LANGUAGE SELECTOR.

 11: .  ,      ,   -          , , ,    W3C;     PROGRESSIVE ENHANCEMENT, SEMANTIC MARKUP, UNOBTRUSIVE STYLE SHEETS, UNOBTRUSIVE JAVASCRIPT, ACCESSIBLE FORMS, ACCESSIBLE IMAGES, ACCESSIBLE TABLES, ACCESSIBLE NAVIGATION  ACCESSIBLE ALTERNATIVE.

 12:  .   -    ,      .      ,  ,       -;   LIQUID-WIDTH LAYOUT, FIXED-WIDTH LAYOUT, PROGRESSIVE LAYOUT, GRID STRUCTURE, VISUAL HIERARCHY, HIGHLIGHT  ICONS.

 13:  .       ,         ,    ,   .               ,       .

 14: .        ,           ,   ,        .     ,      -,    CONTEXTUAL HELP, FREQUENTLY ASKED QUESTIONS, APPLICATION HELP, GUIDED TOURS, HELP WIZARDS, HELP COMMUNITY  CLICK-TO-CHAT.





        -,        .        2008   ,         .   ,  ,   ,  ,       .





    


            -,    ,          .

 ,    ,  ,       ,   ,        .      ,    !    (Graham, 2003):    ,   ,                .        .         ,       ,      - ,      .




 2










    -.     (,  ,    , ,    ) -     ,     ,  ,  ,      . .       , ,         , :

     (CLEAR BENEFITS);

        (SHORT FORMS);

         (LOGICAL GROUPING);

       ,     (LABEL ALIGNMENT);

   ,     (REQUIRED FIELD INDICATORS, INPUT HINTS/PROMPTS);

      ,    ,             (SMART DEFAULTS);

      (SMART DEFAULTS, FORGIVING FORMAT, KEYBOARD NAVIGATION);

   ,    (ACTION BUTTONS);

          (ERROR MESSAGES).

    (,   ,    )        ,       ,     ,   ; ,   (Mayhew, 1991),  (Galitz, 2002),        Apple (2007)       Windows Vista (User Experience Guidelines, 2007).

  ,  -    HTML      ,    ,   Windows  Macintosh.  ,    -    :   (       ), , ,  ,  ,  (   )       .     , ,  ,  ,     .           HTML,    CSS   JavaScript,       ,            .




CLEAR BENEFITS ( )





 ,    ,              .




        .   ,       (. .   ),         - (. 2.1).




. 2.1.   LinkedIn       LinkedIn helps you (LinkedIn  )






,         ,   ,               .  ,      ,    ,      .      ,       ,      ,       .




       ,          ,         (. 2.2).




. 2.2.  UIE        , UIEtips



     

     ,         .    ,     (. 2.3).




. 2.3.  Blockbuster     Blockbuster.com       



 ,      

       .      ,        ,    .   ,        ,     .            ,      ,   ,      .       ,      ,     (. 2.4).




. 2.4.  Plaxo        , ,   ,      ,     



  -     ,      .     ,       ,       .    ,       -,           (. 2.5  2.6).




. 2.5.  Prosper (      )    ,            How to borrow (   )  How to lend (  )






. 2.6.      (  ,    . .)  Blogger         Take a Quick Tour( )




  

   -  ,     ,        CLICK-TO-CHAT (.  14),         .




SHORT FORMS ( )





      ,       ,             .     ,         .




     (. 2.7).     ,     .           ,        (.      REQUIRED FIELD INDICATORS).




. 2.7.     Crazy Egg             .  ,      ,   ,   






,  Relevant Ads, ,       (. 2.8).  ,      ,          .        ,       .




. 2.8.  ,  Relevant Ads,         






,     ,   ,      .   ,      ,   .      ,      ,      ,    ,    .      , ,  Google,                (. 2.9).




. 2.9.    Google    .      I'm Feeling Lucky ( !),           Google Search (  Google)    Enter  



 Jottit       , ,    (. 2.10).   -,       ,            Create a page.




()






()



. 2.10.   Jottit,   -,         Create a page ( ) (a).     -     ()



         

     ,       ,    ,    ,    (. 2.11).       ,        ,      .




. 2.11.   Meebo      .      ,                



      ,       ,        .


  

   ,        .   ,  ,    (REQUIRED FIELD INDICATORS),         (LOGICAL GROUPING)        (CLEAR BENEFITS).      WIZARDS  ,      (.  5).




LOGICAL GROUPING ( )





  ,      .    ,   ,          .




   ,    ,           (,  ,    . .; . 2.12).




. 2.12. Yahoo!       ,    ,       






    , ,     ,                  ,     .          ,      .




         , ,  ,   ,    . . ,            ,      . ,       ,     , ,         ,  ,       , , ,    ,      (   ),    (. 2.13).




. 2.13.      Apple    , -,  ,      ,  -,       



    ,     ,       . ,        ,   ,             ,               ,         (. 2.14).




. 2.14.  Dell,        ,           ,            




  

         ,     (SHORT FORMS),    ,  ,    ,          (SMART DEFAULTS),         .




LABEL ALIGNMENT ( )





          ,           .




          :  ,       ; ,        ;  ,         (. 2.15).




()






()






()



. 2.15.      )   ; )      )    






         ,      .   ,  (Penzo, 2006) ,         ,      ,   . 2.15.

     ,        ,           (,       ,     )   ,          .       ,          2  ,    ,       .

           ;        .      ,         .        ,       ,               .           ,       (.  EXTENSIBLE DESIGN   10).




        (       ),    ,     (Penzo, 2006; Wroblewski, 2008).              ,        (. 2.16).




. 2.16.   PriceGrabber      ,       



      ,              (Penzo, 2006).  (Wroblewski, 2008) ,     50 %-75 %      .    (Penzo, 2006)           ,       (. 2.17).




. 2.17.   Basecamp       




   

    ,       ( ),    ,     ,     , ,  . 2.18    .            ,   ,       .          ,  ,   ,     .




()






()



. 2.18.   Apple       (a).  ,            ()




  

          (REQUIRED FIELD INDICATORS).




REQUIRED FIELD INDICATORS (  )





  ,     . ,              .           ,                  .     ,      ,         .




     ,                   (. 2.19).




. 2.19.   Dominos     ,    ,      .  ,    ,     






      ,     ,  ,     ,    ,         ,     ,     ,    .




 -        ( ).     ,         .       (,        ),         .          ,              .

            ,     ,           ;         .





 ,          .       .


    

    ,          ,     ,   -      .        ,  ,   (*), .

       

        ,         ;      :  ,  ,        .

 ,           ,            .  ,          ,       ,    .         ,              (. . 2.19).  ,    ,        (. 2.20),         ,     ,      ;       ,         .




. 2.20.   TravelPost        ,    .   ,      ,   ,           (Penzo, 2006)



   

       ,  , ,    ,     .   .     -,        , ,  ,       ,   ,    .

,      

     ,    ,   ,  ,     .       ,    ,      .


  

       ,               ,    (SHORT FORMS).  ,      ,        ,          (ERROR MESSAGES).




SMART DEFAULTS (Ż   )





       ,      ,     .  ,                ,    ,    ,    ,   ,        .




    ,    , ,  ,    ;    ,       (. 2.21).         ,     (,           )      (,  ).




. 2.21.   Basecamp        When's it due? (  )        Who's responsible? ( ?),     Email 48-hours before it's due (      48   ,   ),      






            .    ,    ,      .   ,                 . ,      ,            (    ),          .              /.            ,     ;           .

      :    ,         ,         (van Duyne et al., 2006).




       , ,    . .      ,         ,     ,    .

         ; ,      ,  ,       ,         (. 2.22).




. 2.22.   Basecamp         .      (To-do),     Enter a to-do item ( ),        Add a To-Do ( )



       

  ,   , , ,   . .,     ,            . ,          ,     ,   ;    ,         .

 ,  ,         ,             .    ,   ,  ,     .         ,     .

     ,    

    , ,          , ,        .     ,       ,        .              .


  

            (SHORT FORMS).  ,           (ERROR MESSAGES).




FORGIVING FORMAT ( )





       ,   ,   ,   . .,        . ,   -   :   (, 3035555555),      (, 303 555 5555  303-555-5555),      ( (303) 555-5555).      ,          .           ,         .




      :  -  ,             -       (. 2.23).




. 2.23.            ,     .            






    (, ,  ,    . .)      .            ,  ,            .




         ,         .            ,       ,        ,     (. 2.24).         (. 2.25; .   AUTOSUGGEST/ AUTOCOMPLETION   8).




. 2.24.   Expedia        ,    (   -)   -






. 2.25.   Kayak   AUTOSUGGEST/ AUTOCOMPLETION,      ,     



    /  

     ,    ,         (.  INPUT HINTS/PROMPTS    ).             .


  

                    .              (INPUT HINTS/PROMPTS)         (.  AUTOSUGGEST/ AUTOCOMPLETION   8).




KEYBOARD NAVIGATION ( )





           Tab   -        .         ,       ,       ,          .




       Tab       .   ,      Enter   ;  ,       ,            (. 2.26).  ,         ,    ,      JavaScript.




. 2.26.            Tab,           . ,   Billing Address (   )  ,   Alt+3 (Windows)  Ctrl+3 (Mac)






     ,      ,      ,                  .




       , . .      ,       ,   .       .   -       (,    )     ,      HTML-.           .    ,  HTML-       (. .  ,      ),          tabindex,    :



<input type="text" name="fieldname" id="fieldname" tabindex="110" />


    ,        ,   Tab        ,           ,       HTML .





  tabindex     1  32 767.       tabindex   tabindex  10.               ,       tabindex,      .


        

        (,  , ,      . .),  ,           ,        .      -     ,     ,       ,   ,      (,        ).            ,      ,  ,  ,   ,     .

   

    ,            (,    ).       HTML    accesskey,    :



<input type="button" value="buttonName" accesskey="k" />


   accesskey,             Alt ( Ctrl (Mac))     ,     accesskey.

           ,     .       . 2.1.


 2.1.    







  

            ,     ,  -   (.  ACCESSIBLE FORMS   11).





       ,       .

          button ,     :

<style type="text/css">

quick-key {

text-decoration: underline;

}

</style>

<button type="button" accesskey="k"><span class="quick-key">K</span>ey Button</button>

      ,     Alt ( Ctrl) +k  ,   : 




    input type="button",   HTML      ,     .





INPUT HINTS/PROMPTS (  /  )





      ,             - .         ,      .




   ,   ,   ,      (. 2.27).   ,       ,   FORGIVING FORMAT (   ).




. 2.27.      LinkedIn          ,   ,   ,    ,       ,      






,    ,           ,     .




  ,       (. 2.28):




. 2.28.     Windows Live      ,      .  ,      ,        ,    



  ,    . ,          ,   ,           .

 ,      ,  ,  ,     . .       : //, //  //;          xxx-xxx-xxxx  . .).

 ,      , ,          . ,            ,        ,   .

                   .  ,           .       ,          /  .

    

  ,          ,    ,              (  )   (. 2.29).      ,       ,   .




  .


   .

   ,     (https://www.litres.ru/pavan-vora/shablony-proektirovaniya-veb-prilozheniy/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .



notes








1


SaaS      ,     -,       ( ,   ),       .          ;      .




2


-      ,         ,      ,        .




3


       ,           .      ,  ,      (    GoF,  . Gang of Four   ):  - .   (, 2007).           ,     (Tidwell, www.designinginterfaces.com (http://www.designinginterfaces.com/)),  (Welie, www.welie.com (http://www.welie.com/)),  (Borchers, 2001),  (Graham, 2003)    (Van Duyne et al., 2002, 2006).




4


                        ,   CHI 2003      XML   Pattern Language Markup Language (PLML;   -).    , .   (Fincher, 2003).


