Thursday, 30 November 2017

Golden Principles of User Interface Design

Golden Principles of User Interface Design

10 Usability Heuristics for User Interface Design

Based upon Ben Shneiderman’s “Designing the User Interface” and Jakob Nielsen’s “Ten Usability Heuristics”, 10 general principles for interaction design. They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines.

1. Strive for consistency

Users should not have to wonder whether different words, situations, or actions mean the same thing. Do not confuse your user — keep words and actions consistent. Use “The Principle of Least Surprise.”
Good Example: Car Climate Control
In other words, use all elements across your application consistently. For example a certain style of button should always do the same thing, or navigation should function logically, going deeper in hierarchy.
Consistency of:
  • Workflow / Processes
  • Functionality
  • Appearance
  • Terminology

2. Visibility of system status or Offer informative feedback

The system should always keep users informed about what is going on. Through appropriate feedback in a reasonable time. Don’t keep the users guessing — tell the user what’s happening.
Good Example: OS Installation status
The user wants to be in control, and trust that the system behaves as expected. It could be even said that users don’t like surprises. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
Feedback:
  • Relevant
  • Fits importance and urgency
  • Comprehensible and meaningful
  • Within appropriate context (time and place)

3. Match between system and the real world or Design dialog to yield closure

Again, the less the users have to guess the better. The system should speak the users’ language (use words, phrases and concepts familiar to the user), rather than special system terms.
Good Example: Payment proceeding (by Ramakrishna)
Sequence of actions should be organized into groups with a beginning, middle and end. When a process is finished, remember to display a notification message. Let the user know that she has done all that’s needed.
Design:
  • Grouping of actions
  • Explicit completion of an action
  • Well-defined options for the next step

4. User control and freedom or Permit easy reversal of actions

Shneiderman puts it nicely “This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options.”
Good Example: Document History
In applications this refers to the undo and redo functionality. Clearly mark an “emergency exit” to leave the unwanted state without having to go through an extended dialogue.
Reversal of actions:
  • No interference with workflow
  • More freedom for the user
  • Single-action undo and action history

5. Error Prevention and Simple Error Handling

Users hate errors, and even more so hate the feeling that they themselves have done something wrong. Either eliminate error-prone conditions or check for them and notify users about that before they commit to the action.
Good example: Password Enter
As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer a simple, comprehensive mechanism for handling the error.
Error Prevention:
  • Error prevention over error correction
  • Automatic detection of errors
  • Clear error notifications
  • Hints for solving the problem

6. Reduce short-term memory load or Recognition rather than recall

As Nielsen says, recognizing something is easier than remembering it. Minimize the user’s memory load by making objects, actions, and options available. The user should not have to remember information from one part of the dialogue to another. Instructions should be visible.
Good Example: Ring/Silent switch
Use iconography and other visual aids such as themed coloring and consistent placement of items to help the returning users find the functionalities.
Reduce memory load:
  • App has a clear structure
  • “Recognition over recall”
  • Implicit help
  • Visual aids

7. Enable frequent users to use shortcuts

Allow users to tailor (manipulate and personalize) frequent actions.
Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user.
Good Example: Click Commands and Shortcuts
Shortcuts:
  • Keyboard shortcuts
  • “Power User” features
  • Action automation

8. Aesthetic and Minimalist design

Minimalist doesn’t mean limited. All information should be valuable and relevant.
Simplify interfaces by removing unnecessary elements or content that does not support user tasks.

9. Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (don’t use system language to describe what the system is doing), precisely indicate the problem, and constructively suggest a solution.
Tell the user clearly and plainly what’s happening both on the background and when they perform an action.

10. Help and documentation

Even though it is better if the interface can be used without documentation, it may be necessary to provide help and documentation. Any help information should be easy to searchfocused on the user’s task, list of concrete steps, and not too large.

Wednesday, 1 November 2017

How to Duplicate Posts and Pages Without Plugins

How to Duplicate Posts and Pages Without Plugins

It is very useful when you work with a lot of similar posts. So, when you copy a post, you don’t have to enter all metadata, taxonomies etc. each time manually.

Duplicating posts is a very useful functionality when you work with a lot of similar posts (for example products in online shop). Especially if the posts have the same custom fields values, but the different post title and content.
It means that you do not have to re-enter custom fields, post tags and categories each time.
This is the example:

When you click the «Duplicate» link, the post will be cloned, but it won't be published, it will be saved as a draft and you will be redirected to the post edit admin page.
This is enough easy to do, so, look at the following code, insert it into your theme functions.php file (or into the another file if you know what to do).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/*
 * Function creates post duplicate as a draft and redirects then to the edit post screen
 */
function rd_duplicate_post_as_draft(){
 global $wpdb;
 if (! ( isset( $_GET['post']) || isset( $_POST['post'])  || ( isset($_REQUEST['action']) && 'rd_duplicate_post_as_draft' == $_REQUEST['action'] ) ) ) {
  wp_die('No post to duplicate has been supplied!');
 }
 
 /*
  * Nonce verification
  */
 if ( !isset( $_GET['duplicate_nonce'] ) || !wp_verify_nonce( $_GET['duplicate_nonce'], basename( __FILE__ ) ) )
  return;
 
 /*
  * get the original post id
  */
 $post_id = (isset($_GET['post']) ? absint( $_GET['post'] ) : absint( $_POST['post'] ) );
 /*
  * and all the original post data then
  */
 $post = get_post( $post_id );
 
 /*
  * if you don't want current user to be the new post author,
  * then change next couple of lines to this: $new_post_author = $post->post_author;
  */
 $current_user = wp_get_current_user();
 $new_post_author = $current_user->ID;
 
 /*
  * if post data exists, create the post duplicate
  */
 if (isset( $post ) && $post != null) {
 
  /*
   * new post data array
   */
  $args = array(
   'comment_status' => $post->comment_status,
   'ping_status'    => $post->ping_status,
   'post_author'    => $new_post_author,
   'post_content'   => $post->post_content,
   'post_excerpt'   => $post->post_excerpt,
   'post_name'      => $post->post_name,
   'post_parent'    => $post->post_parent,
   'post_password'  => $post->post_password,
   'post_status'    => 'draft',
   'post_title'     => $post->post_title,
   'post_type'      => $post->post_type,
   'to_ping'        => $post->to_ping,
   'menu_order'     => $post->menu_order
  );
 
  /*
   * insert the post by wp_insert_post() function
   */
  $new_post_id = wp_insert_post( $args );
 
  /*
   * get all current post terms ad set them to the new post draft
   */
  $taxonomies = get_object_taxonomies($post->post_type); // returns array of taxonomy names for post type, ex array("category", "post_tag");
  foreach ($taxonomies as $taxonomy) {
   $post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));
   wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
  }
 
  /*
   * duplicate all post meta just in two SQL queries
   */
  $post_meta_infos = $wpdb->get_results("SELECT meta_key, meta_value FROM $wpdb->postmeta WHERE post_id=$post_id");
  if (count($post_meta_infos)!=0) {
   $sql_query = "INSERT INTO $wpdb->postmeta (post_id, meta_key, meta_value) ";
   foreach ($post_meta_infos as $meta_info) {
    $meta_key = $meta_info->meta_key;
    if( $meta_key == '_wp_old_slug' ) continue;
    $meta_value = addslashes($meta_info->meta_value);
    $sql_query_sel[]= "SELECT $new_post_id, '$meta_key', '$meta_value'";
   }
   $sql_query.= implode(" UNION ALL ", $sql_query_sel);
   $wpdb->query($sql_query);
  }
 
 
  /*
   * finally, redirect to the edit post screen for the new draft
   */
  wp_redirect( admin_url( 'post.php?action=edit&post=' . $new_post_id ) );
  exit;
 } else {
  wp_die('Post creation failed, could not find original post: ' . $post_id);
 }
}
add_action( 'admin_action_rd_duplicate_post_as_draft', 'rd_duplicate_post_as_draft' );
 
/*
 * Add the duplicate link to action list for post_row_actions
 */
function rd_duplicate_post_link( $actions, $post ) {
 if (current_user_can('edit_posts')) {
  $actions['duplicate'] = '<a href="' . wp_nonce_url('admin.php?action=rd_duplicate_post_as_draft&post=' . $post->ID, basename(__FILE__), 'duplicate_nonce' ) . '" title="Duplicate this item" rel="permalink">Duplicate</a>';
 }
 return $actions;
}
 
add_filter( 'post_row_actions', 'rd_duplicate_post_link', 10, 2 );
But what if this code works only for posts, not for pages or any registered post types? Do not worry, all we need to do is to change the last filter to this:
add_filter('page_row_actions', 'rd_duplicate_post_link', 10, 2);

Alternative content