Slides from the Five Mile Media presentation at the Drupal Show & Tell event held in London on 21 November 2013. Five Mile covered how you can improve the user interface in Drupal 7 to offer your clients a better user experience. Slides include topics such as: providing client dashboards, simplifying toolbar and menus, improving content management, better use of the WYSIWYG, utilising preview.

1. Client

2. Friendly

3. User

4. Experience
in

5. Drupal

6. 7
Presenters
Keith

7. Jay
Founder

8. of

9. Five

10. Mile,

11. Designer,

12. Drupal

13. Themer

14. (pub

15. chat:

16. Volkswagen

17. Camper)
Gareth

18. Goodwin:
Lead

19. Drupal

20. Developer

21. (pub

22. chat:

23. Bass

24. guitars)
Monday, 25 November 13

25. Introduction

27. What

28. we

29. want

30. to

31. cover
drupal.org

32. says:
Drupal

33. 'allows

34. you

35. to

36. easily

37. organize,

38. manage

39. and

40. publish

41. your

42. content'.

43.
Experience

44. has

45. taught

46. us:
Unfortunately,

47. this

48. statement

49. can

50. be

51. far

52. from

53. true

54. when

55. the

56. client

57. user

58.
experience

59. is

60. neglected.
We

61. will

62. cover

63. some

64. of

65. things

66. we

67. are

68. doing

69. in

70. the

71. Drupal

72. 7

73. interface.
Please

74. do

75. chip

76. in

77. with

78. your

79. own

80. thoughts

81. and

82. ideas...
Monday, 25 November 13

83. Firstly,

84. do

85. we

86. agree

87. there

88. is

89. a

90. problem?
How

91. many

92. of

93. us

94. have

95.
inherited

96. projects

97. with

98. an

99.
interface

100. like

101. this?
Monday, 25 November 13

102. Do

103. we

104. take

105. care

106. of

107. Drupal

108. UI

109. shortfalls?
Welcome!
Monday, 25 November 13

110. Nodes

111. lead

112. to

113. a

114. typical

115. workflow
Because

116. we

117. work

118. with

119. nodes,

120. we

121.
are

122. driven

123. by

124. the

125. node

126. edit

127. process.
The

128. challenge

129. to

130.
us

131. all

132. is

133. to

134. ensure

135.
that

136. good

137. client

138.
UX

139. is

140. built

141. into

142.
our

143. proposals.
Monday, 25 November 13

144. There

145. are

146. real

147. benefits

148. in

149. delivering

150. a

151. great

152.
user

153. experience

154. for

155. those

156. using

157. Drupal
Reduce

158. support

159.
Less

160. errors
Better

161. performance
Easier

162. training
Better

163. interface

164. design
Influences

165. future

166. Drupal
Improve

167. opinion
Happier

168. clients
Monday, 25 November 13

169. Improving

170. Drupal

171. 7

172. UX
Think

173. about

174. your

175. client’s

176. journey,

177. especially

178.
for

179. their

180. first

181. visit.
Here

182. are

183. some

184. of

185. the

186. more

187. general

188.
customisations

189. we

190. like

191. to

192. make.
Monday, 25 November 13

193. Improving

194. Drupal

195. 7

196. UX
Your

197. client

198. Will

199. likely

200. make

201. a

202. nervous

203. start
Have

204. a

205. friendly

206. greeting

207.
designed

208. to

209. calm

210. any

211.
newbie

212. nerves!
Monday, 25 November 13

213. Improving

214. Drupal

215. 7

216. UX
Your

217. client

218. A

219. better

220. start
So

221. provide

222. the

223. right

224. sort

225.
of

226. greeting

227. -

228. a

229. helpful

230.
dashboard

231. on

232. login.
We

233. are

234. starting

235. to

236. use

237.
contextual

238. video

239. snippets

240.
through

241. our

242. sites.

243.
Especially

244. for

245. tricky

246. bits.
Monday, 25 November 13

247. Improving

248. Drupal

249. 7

250. UX
Simplify

251. account

252. management
Does

253. the

254. interface

255. follow

256. typical

257. patterns

258. or

259. terminology?
?
Monday, 25 November 13
Better

260. Improving

261. Drupal

262. 7

263. UX
Simplify

264. account

265. management
Improve

266. account

267. editing
Before
Monday, 25 November 13
After

268. Improving

269. Drupal

270. 7

271. UX
Remove

272. redundant

273. features

274. We

275. really

276. believe

277. in

278. less
Tame

279. those

280. permissions
Start

281. with

282. a

283. simple

284. core

285. set

286.
of

287. permissions
Add

288. as

289. required
Monday, 25 November 13

290. Improving

291. Drupal

292. 7

293. UX
De-clutter

294. the

295. admin

296. toolbar
Potential

297. for

298. being

299. overwhelmed:
With

300. permissions

301. reduced,

302. less

303. chance

304. of

305. being

306. overwhelmed:
Monday, 25 November 13

307. Improving

308. Drupal

309. 7

310. UX
About

311. that

312. menu...

313.
We

314. really

315. like

316. the

317. admin

318. menu

319. module

320. -

321. our

322. clients

323. do

324. too
Monday, 25 November 13

325. Improving

326. Drupal

327. 7

328. UX
Improve

329. the

330. content

331. management
admin_views

332. content

333. listing
Core

334. content

335. listing
Monday, 25 November 13

336. Improving

337. Content

338. Creation
Publishing

339. and

340. editing

341. content
/node/*/edit
Monday, 25 November 13

342. Improving

343. Drupal

344. 7

345. UX
Now,

346. let’s

347. create

348. a

349. page

350. Simple,

351. right?
Just

352. enter

353. the

354. title,

355. and

356. the

357. page

358.
content

359. into

360. the

361. body

362. area...
...and

363. choose

364. a

365. text

366. format?
What

367. is

368. that?
How

369. do

370. I

371. add

372. bullet

373. points?
Bold

374. text?
Links?
...and

375. what

376. are

377. all

378. these

379. options

380. at

381.
the

382. bottom?
Monday, 25 November 13

383. Improving

384. Drupal

385. 7

386. UX
Fix

387. this

388. experience

389. Describe

390. all

391. things!
Simple

392. functionality

393. descriptions

394. can

395. transform

396.
user

397. experience.

398. It’s

399. tedious,

400. it’s

401. tricky

402. to

403. get

404.
right

405. sometimes

406. but

407. we

408. believe

409. it’s

410. vital.
Descriptions

411. apply

412. to:
Fields
Content

413. types
Menus
Vocabularies
Monday, 25 November 13

414. Improving

415. Drupal

416. 7

417. UX
Fix

418. this

419. experience

420. Let’s

421. grab

422. a

423. WYSIWYG...
We

424. use

425. CKEditor,

426.
customised

427. to

428. allow

429.
clients

430. to

431. publish

432. content

433.
in

434. as

435. controlled

436. way

437. as

438.
reasonable.
Monday, 25 November 13

439. Improving

440. Drupal

441. 7

442. UX
Fix

443. this

444. experience

445. Let’s

446. grab

447. a

448. WYSIWYG...
Easy

449. to

450. style

451. bullets

452. to

453.
brand

454. requirements.
Monday, 25 November 13

455. Improving

456. Drupal

457. 7

458. UX
Fix

459. this

460. experience

461. Let’s

462. grab

463. a

464. WYSIWYG...
Calls

465. to

466. action

467. are

468. really

469.
important.

470. On

471. brand

472. linkbased

473. calls

474. to

475. action

476. are

477.
inserted

478. with

479. ease.
Monday, 25 November 13

480. Improving

481. Drupal

482. 7

483. UX
Fix

484. this

485. experience

486. Let’s

487. grab

488. a

489. WYSIWYG...
Relatively

490. simple

491. to

492. do

493.
with

494. a

495. custom

496. module,

497.
customised

498. JavaScript

499.
configuration

500. and

501.
importantly

502. CKEditor

503.
specific

504. styles.
Monday, 25 November 13

505. Improving

506. Drupal

507. 7

508. UX
Ease

509. page

510. linking

511. Without

512. needing

513. to

514. note

515. node

516. ID’s
The

517. linkit

518. module

519. makes

520. it

521.
easy

522. for

523. users

524. to

525. link

526. to

527.
other

528. content

529. within

530. the

531.
website,

532. without

533. needing

534.
to

535. worry

536. about

537. node/id

538.
links

539. or

540. adding

541. in

542. the

543. full

544.
path.
Use linkit with pathologic to convert node/id links into the path alias when displayed.
Monday, 25 November 13

545. Improving

546. Drupal

547. 7

548. UX
Hide

549. those

550. confusing

551. input

552. formats
In

553. our

554. experience,

555. clients

556.
have

557. only

558. ever

559. needed

560. one

561.
input

562. format.
Two

563. solutions:
Remove

564. completely
(hook_form_alter

565. or

566. simplify

567. module)
Collapse

568. into

569. an

570.
expandable

571. fieldset

572. and

573.
sensible

574. defaults
(hide_formats

575. module)
Monday, 25 November 13

576. Improving

577. Drupal

578. 7

579. UX
Improve

580. multi-select

581. lists
The

582. default

583. multi-select

584. is

585.
hard

586. to

587. use:
Users

588. need

589. to

590. know

591. to

592.
ctrl

593. +

594. click

595.
Core

596. select

597. lists
or

598.
shift

599. +

600. click

601.
to

602. select

603. multiple

604. options.
You

605. then

606. can’t

607. easily

608. see

609.
what

610. has

611. already

612. been

613.
selected.
Multi-select

614. select

615. lists
Monday, 25 November 13

616. Improving

617. Drupal

618. 7

619. UX
Preview

620. Tricky
Preview

621. is

622. a

623. real

624. issue.
Clients

625. really

626. like

627. to

628. see

629. how

630. it

631. is

632. going

633.
to

634. look

635. for

636. real.
Monday, 25 November 13

637. Improving

638. Drupal

639. 7

640. UX
Preview

641. Tricky,

642. some

643. options
Drupal

644. has

645. a

646. simple

647. fix!
Set

648. your

649. content

650. to

651. be

652.
unpublished

653. by

654. default...
...then

655. theme

656. all

657. the

658. places

659.
where

660. your

661. content

662. is

663.
exposed

664. so

665. that

666. genuine

667.
preview

668. is

669. available

670. coupled

671.
with

672. clear

673. visual

674. prompts

675. on

676.
the

677. content

678. status.
Monday, 25 November 13

679. Not

680. just

681. the

682. Drupal

683. interface
Improving

684. UX

685. in

686. the

687. way

688. you

689.
build

690. sites
Monday, 25 November 13

691. Improving

692. Drupal

693. 7

694. UX
Making

695. tasks

696. easier

697. Content

698. workflow
Instead

699. of

700. using

701. the

702.
workflow

703. tab,

704. or

705. editing

706.
the

707. node

709. scrolling

710. down

711.
to

712. workflow

713. settings,

714. we

715.
added

716. two

717. lines

718. of

719. code

720. to

721.
make

722. the

723. users

724. task

725. easier.
Monday, 25 November 13

726. Improving

727. Drupal

728. 7

729. UX
Making

730. tasks

731. quicker

732. Content

733. creation
When

734. a

735. new

736. piece

737. of

738.
content

739. is

740. created

742.
added

743. to

744. a

745. book,

746. we

747.
automatically

748. create

749.
placeholder

750. nodes

751. for

752. the

753.
rest

754. of

755. the

756. content,

757. added

758.
to

759. the

760. right

761. book

762. in

763. the

764.
right

765. order.
Monday, 25 November 13

766. Improving

767. Drupal

768. 7

769. UX
Making

770. tasks

771. automated

772. User

773. management
Using

774. rules

775. components,

776.
we

777. created

778. custom

779. bulk

780.
operations

781. to

782. speed

783. up

784.
user

785. management

787.
reduce

788. room

789. for

790. errors.
Help avoid mistakes by asking for confirmation
Monday, 25 November 13

791. Improving

792. Drupal

793. 7

794. UX
Making

795. tasks

796. automated

797. Behind

798. the

799. scenes
Rules

800. components

801. are

802. a

803.
great

804. way

805. to

806. automate

807.
tasks.
Monday, 25 November 13

808. Improving

809. Drupal

810. 7

811. UX
Questions?
Slides

812. will

813. be

814. available

815.
online.
Series

816. of

817. blog

818. posts

819. to

820.
come

821. on

822. our

823. new

824. site

825. in

826.
next

827. few

828. weeks.
Monday, 25 November 13