I have a table of related items. Let's call them orders. Users can select an item from the table and full details will be displayed in a separate section below the table. I move the currently selected item to the top of the table (the items in the table have no natural logical order), but this is insufficient for users to determine which item's details are being displayed. How can I indicate the currently selected item if I'm already using formatting like bold text in my table?
2 Answers
Highlighting the entire row should be a good indicator.
download bmml source – Wireframes created with Balsamiq Mockups
Changing the background color (of the row) also helps.
Following up on rk.'s answer, which I think is a good solution given the background you've provided, I would also like to suggest that you don't move a selected item around in the table. Try rk.'s solution out, but stick to highlighting the row, don't move the item. This will most likely be quite confusing and disorientating to the user, and could also be vert frustrating if the item is moved in a scrollable table and the table suddenly scrolls to the top on a user clicking an item.